How to make menu bar black

[Steve]

Hello,

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?

Thanks!

[David]

Hi there,

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

https://docs.generatepress.com/article/header-element-overview/

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Steve]

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]

1. Try this CSS:

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

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

https://docs.generatepress.com/article/generate_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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Steve]

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?

Thanks!

[David]

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:
https://docs.generatepress.com/article/adding-php/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Steve]

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]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Steve]

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

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts