[Resolved] Double color in Main menu

Home Forums Support Double color in Main menu

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #230454
    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.

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

    #230477
    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

    #230479
    Jean

    Hey Diego,

    You can achieve this adding this custom css:

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

    Hope I’ve helped you πŸ™‚

    #230480
    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

    #230481
    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.

    #230483
    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

    #230484
    Jean

    For that just target this id:

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

    Hello Jean. It doesn’ work.

    That’s the code I put:

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

    #230795
    Jean

    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.

    #230993
    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

    #231009
    Tom
    Lead Developer
    Lead Developer

    This should work:

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

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

    #231102
    Tom
    Lead Developer
    Lead Developer
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.