Navbar permanent colour instead of white

Homepage Forums Pro Support Forum BoldR Pro BoldR Pro Support Navbar permanent colour instead of white

Note about WordPress 5.0:
Our themes are compatible with WordPress 5.0. However not all functionality are guaranteed to work as expected with the new editor (Gutenberg) that comes with 5.0.

We highly recommend installing the Classic Editor plugin, which will bring back the usual editor if you run into any issue or just do not like the new editor.

An update to bring full compatibility with Gutenberg is being worked on, but has been postponed because of the recent fast-paced evolution of the Gutenberg project until WP 5.0 release. More info about the release of WordPress 5.0 announced on a short 2-days notice can be found here: New 5.0 Target Date.

Navbar permanent colour instead of white

This topic contains 5 replies, has 2 voices, and was last updated by  Adam 4 days, 23 hours ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #24483
    Navbar permanent colour instead of white

    Adam
    Participant

    Hello,

    Could you please tell me if there is a way to amend the navbar menu to a solid colour instead of white?

    Many thanks,
    Adam

    #24485
    Reply to: Navbar permanent colour instead of white

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Hello,

    Sure this is possible, there is no setting for this in the option panel but you can achieve it with just a bit of Custom CSS.

    Paste the following in Appearance > Theme Options > Custom CSS:

    #navbar {
        padding: 0 4%;
        width: 100%;
        box-sizing: border-box;
    }
    
    #nav-search {
        right: 4%;
    }
    #navbar {
        background: #013564;
    }
    
    #navbar ul li a {
        color: #ffffff;   
    }
    
    #navbar .sub-menu li {
        background: #013564;
    }

    The first part adjusts to how the navbar is positioned and sized, so the coloured background can go all the way to the edges of the white area.

    The second part is where you can change your colours:

    – First the background navbar. I picked the dark blue from your logo (#013564), you can of course change it to anything you like.

    – Second is the text colour for links. They are light grey by default, but you will probably need to change this depending on the background colour you pick. I set it to white (#ffffff) in this example.

    – Then the background for sub-menu drop-downs. They are dark grey by default, but again you may want to change this so it looks better depending on the colour you set for the navbar itself. I used the same dark blue as the navbar in this snippet.

    I hope this helps, please let me know if you need any further help!

    #24493
    Reply to: Navbar permanent colour instead of white

    Adam
    Participant

    That’s brilliant, thank you for your help!

    #24494
    Reply to: Navbar permanent colour instead of white

    Adam
    Participant

    Just one more question please, is there anyway to line the menu up with the end of the end of my logo and search bar (so it doesnt run across the whole page?

    Thanks for your help.

    • This reply was modified 1 week, 1 day ago by  Adam.
    #24502
    Reply to: Navbar permanent colour instead of white

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Hi, sorry for the delayed response. To do this, you’d need to change the first block of code from my previous reply.

    Remove this:

    #navbar {
        padding: 0 4%;
        width: 100%;
        box-sizing: border-box;
    }

    and replace with this instead:

    #navbar {
        max-width: 715px;
        margin-left: 4%;
        box-sizing: border-box;
    }

    You can adapt the max-width (715px seems to be the current size of your logo) as necessary.

    From a quick test however I’m not sure this will work just right with the current items in your navbar since they do take more than 715px, this would therefore force the last item to go to a second row. You may need to review those items and consider making them smaller.

    Alternatively, you can also make the navbar be only as wide as necessary. To try this, remove all the code from the previous reply and replace it with this amended version:

    #navbar {
        margin-left: 4%;
        box-sizing: border-box;
        border-bottom: none;
    }
    
    #navbar li {
        background: #013564;
    }
    
    #navbar ul li a {
        color: #ffffff;   
    }
    
    #navbar .sub-menu li {
        background: #013564;
    }
    #24507
    Reply to: Navbar permanent colour instead of white

    Adam
    Participant

    That’s brilliant, I have it how I want from your help. Thanks again, much appreciated.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.


PayPal Verified
Secured by PayPal
Secure Credit Card payments powered by Stripe