Double color in Main menu

You can make your menu hover and current background color different in the Customizer. Got to Appearance/Customize/Colors/Primary Navuigation and change colors as desired. The home page does not show the new background color, but all the other pages will. (Can anyone help with the why and how to fix on home not reading current?)

Hello Wendy. I'm not speaking about menu hover and current background color. I'm saying to have two colors in the menu background, like the web site. One color as the main background, and one second color as a thin line below the menu

Thanks for your help

Hey Diego,

You can achieve this adding this custom css:

.main-navigation {
    border-bottom: 5px solid #000;
}

Hope I've helped you :)

Sorry, I didn't even see the colored line. I do that with a border on the inside-nav element when I need a border color. I use either Simple CSS plugin or a child-theme style.css to add the bits of CSS I want. I did this to the site http://www.realfoodtips.com/ to add the lighter grey on the top of the nav bar. Here's the CSS for that one.

.inside-navigation {
border-top: solid 4px #ccc;
}

Wendy

Diego's is closer to what you need. Mine is on a site with a contained nav bar, so to do the full width, you will need to use the main-navigation class.

Hi Jean and Wendy. It works.
And sorry I had not told them that I want the second line appears when the user moves the scroll down.

How can I do to make this appears only when I go down on the website?

Thank you for your help

For that just target this id:

#sticky-navigation {
    border-bottom: 5px solid #000;
}

Hello Jean. It doesn' work.

That's the code I put:

#sticky-navigation {
border-bottom: 5px solid #fe9b00;
}

Diego, sorry for late reply, busy day...

For me worked this solution, where did you placed your css code? I suggest you to follow this tutorial on how to add custom css: https://generatepress.com/knowledgebase/adding-css/

Also if you have a link for your site that I can look at, maybe I can be more accurate.

Hi Jean. Thanks for answering
My site is ingenioempresa.com

I use Jetpack custom css. I copied and pasted the last code sent ..

After your message, I tryed with Simple CSS but below main line doesn't appear.

Sorry if my english is hard to understand :)

Thank you

This should work:

.main-navigation.is_stuck,
.main-navigation.navigation-clone {
    border-bottom: 5px solid #eb9812;
}

Hello Tom. Awesome, it worked. Thanks.
Jean and wendy, thanks for the support too.

Perfect :)