[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
    Posts
  • #1232121

    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!

    #1232400

    David Customer Support

    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.

    #1233525

    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!

    #1233858

    David Customer Support

    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;
    }
    #1234389

    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!

    #1234482

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

    #1234585

    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!

    #1234980

    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.

    #1235764

    Steve

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

    #1236345

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

You must be logged in to reply to this topic.