[Resolved] How to make menu bar black

Home Forums Support How to make menu bar black

This topic contains 9 replies, has 2 voices, and was last updated by  David 1 month, 2 weeks ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #1232121



    So I’m making a website based on GeneratePress’s Aspire theme, and I would like to make the top menu bar (the one that has Home, About, Services, Blog, Contact) black, both on desktop and mobile. How can I go about doing so?

    Also, if I want to add a second menu bar directly below the top menu bar, how can I go about doing so? I have GeneratePress Premium and Elementor (but not Elementor Pro). Would I do this in Elementor or in GeneratePress?



    David Customer Support

    Hi there,

    1. in Appearance > Elements – you will see two Header Elements:


    If you edit them and go to the Site Header tab you can uncheck the Navigation colors and uncheck Merge with Content.

    Now you can change the colors in Customizer > Colors > Primary Navigation.

    2. In Appearance > Menus – create your second menu and set its Display Location to Secondary Menu.

    In the Customizer > Layout > Secondary Navigation you can change its location.



    Thanks David! I tried that and it works great. A few other questions:

    1. How do you adding padding to the left side and the right side of the menu bar, so that there’s more space to the left side of the logo, and to the right of side of the rightmost menu item? I tried with the padding options on Home Page Header’s “Page Hero” tab but that didn’t work.

    2. I set up WordPress on a subdirectory of my domain. How do I make it so that, when I click on the website logo, it goes to the homepage of my domain instead of to the subdirectory where WordPress is installed?

    Thanks again!


    David Customer Support

    1. Try this CSS:

    .main-navigation.has-branding .inside-navigation {
        padding-left: 20px;
        box-sizing: border-box;

    2. You can use this Filter to edit the Logo output:


    You would do something like this:

    add_filter( 'generate_logo_href','tu_add_custom_logo_href' );
    function tu_add_custom_logo_href( $url )
        $url = 'add_your_url_here';
        return $url;


    Thanks David. For #1, I added your CSS to Appearance -> Customize -> Additional CSS and it didn’t work in adding padding to the left and right sides of the menu bar.

    For #2, where would I add your code to?



    David Customer Support

    In your CSS this Comment:
    /*Additional CSS to add padding to menu bar*/)
    remover the ) and then the code after it will work.

    That code is PHP – read here:



    Thanks David, this works great now! One last thing: I actually had to change the padding on the menu bar to pretty wide (130 pixels on both sides) to match the look of my main website. But by doing so, on the mobile site the menu bar is now broken into 2 lines. Is there a way to just add the padding to the desktop version of the menu bar and not the mobile version of the menu bar? Thanks!


    David Customer Support

    Instead of using CSS – just set the Customizer > Layout > Primary Navigation –> Inner Navigation Width to contained to limit it to the width of your page content.



    Awesome, that works perfectly now. Thanks so much for all your help David!


    David Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.