WordPress.org

Forums

Changing the Colour of my Nav bar (11 posts)

  1. lizzy39
    Member
    Posted 1 year ago #

    Hi,

    I am struggling trying to change the colour of my nav bar, i have followed lots of posts on here, but all i have managed to do so far is make it transparent.

    i am using the travelzine responsive theme and have tried using Custom CSS manager to edit it, however nothing i enter seems to do anything.

    My website is global-gurus.com

    I would be very grateful for some help please?

    Many Thanks

  2. thedree1
    Member
    Posted 1 year ago #

    Hey Lizzy, unfortunately I learned that wordpress forum do not support other themes besides the default themes. The Nav bar, are you talking about the menu bar? Like where your "Home" bar is?

  3. lizzy39
    Member
    Posted 1 year ago #

    Hi, oh i had not realised that :( thanks.

    yes, i mean the menu bar below the header panel.

    i can change the top menu, but really cannot figure out how to change the other one.

    I hope you can still help me please?

  4. hostknox
    Member
    Posted 1 year ago #

    You should be able to do this by modifying the file MenuMatic.css of your theme. The path to the file on your hosting account would be public_html/wp-content/themes/TravelZine/menu/MenuMatic.css. The code that you need starts around line 88 and looks like this:

    #nav li {
        background-image: url("../img/mainnav-sep.gif");
        background-position: 100% 5px;
        background-repeat: no-repeat;
        cursor: pointer;
        display: inline;
        float: left;
        height: 50px;
        margin: 0 2px 0 0;
        padding: 0 2px 0 0;
    }

    Put an attribute for the color (e.g. background-color: green;), so that the code looks like this:

    #nav li {
        background-image: url("../img/mainnav-sep.gif");
        background-position: 100% 5px;
        background-repeat: no-repeat;
        background-color: green;
        cursor: pointer;
        display: inline;
        float: left;
        height: 50px;
        margin: 0 2px 0 0;
        padding: 0 2px 0 0;
    }

    Then clear the browser cache and refresh the frontend of your site.

    Hope this helps.

  5. WPyogi
    Forum Moderator
    Posted 1 year ago #

    @hostknox - won't those changes will be lost when the theme is updated? It's generally much better advice to use custom CSS or a child theme.

  6. Andrew
    Forum moderator
    Posted 1 year ago #

  7. hostknox
    Member
    Posted 1 year ago #

    WPyogi, they most certainly will. Thank you for the note.

    Here's more info on child themes:

    http://codex.wordpress.org/Child_Themes

  8. lizzy39
    Member
    Posted 1 year ago #

    Thanks for the help here everyone.

    yeah i have read a few of those posts thanks, and now know that i need to update the custom css plug-in to avoid update issues down the line. i have downloaded this, but i have no idea what code to add in the custom css plugin to make this work - i could not find this information anywhere?!

    i don't really want to have to change the css file if i can help it.

  9. lizzy39
    Member
    Posted 1 year ago #

    can anybody help me with the code i need to use in the custom css manager plugin please?

  10. Andrew
    Forum moderator
    Posted 1 year ago #

    If you need it urgently and are not receiving support as fast as you'd like then it may be worth asking for help from http://jobs.wordpress.net or http://directory.codepoet.com .

    WordPress.org is driven by volunteers, which can mean that some threads are never answered.

  11. lizzy39
    Member
    Posted 1 year ago #

    Thats great, thanks for your help :)

Topic Closed

This topic has been closed to new replies.

About this Topic