[Resolved] Double color in Main menu

[Diego Fernando]

Hello Tom

I looking for some answers to my ideas, I found this page: http://www.rswebsols.com/ has two colors in its main menu: yellow and black

I want to meet you … How to put double color in the main menu, just as it did this website.

I want to thank for GP. It is wonderful, thank you very much.

[Wendy Peck]

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?)

[Diego Fernando]

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

[Jean Paiva]

Hey Diego,

You can achieve this adding this custom css:

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

Hope I’ve helped you 🙂

[Wendy Peck]

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

[Wendy Peck]

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.

[Diego Fernando]

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

[Jean Paiva]

For that just target this id:

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

[Diego Fernando]

Hello Jean. It doesn’ work.

That’s the code I put:

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

[Jean Paiva]

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.

[Diego Fernando]

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

[Tom]

This should work:

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

[Diego Fernando]

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

[Tom]

Perfect 🙂

[Author]

Posts