Home>Support>How to change text color and hover background color in Header Menu

How to change text color and hover background color in Header Menu

By Susana, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hi, I´ve moved my main menu to the header section using a widget – Custom Menu but it seams that I´ve lost the previous format that I used for this menu using the Customize Tool.

So, how can I change the color text and hover background color to the main menu once this is added in the Header section?

I´d like to create a menu like the one on this website: http://www.hipotecash.com.ar/
Any ideas?

Thanks for your help!

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Hi Susana

    The Customizer menu styling unfortunately doesn’t apply to the header widget area menu styling.

    This is a bit of a custom development task. If you want to jump in at a code level you could start with the following inserted under Appearance > Custom CSS:

    /* Vantage Header Custom Menu Styling */

#header-sidebar .widget_nav_menu ul.menu > li > a {
display: block;
text-decoration: none;
color: #555555;
font-weight: 500;
padding: 0.75em 0;
line-height: 1em;
}

#header-sidebar .widget_nav_menu ul.menu > li > a:hover {
color: #333;
}

    And make changes from there.

  2. 9 years, 10 months ago Susana

    Hi Andrew, thanks for your help!

    I’ve inserted the CSS code as you showed above and then I played a bit changing hexcode colors and it worked great! but now I would like to create a blue wrapper box for each item and sub item of the menu, this blue wrapper box should appear when I hover the item.

    Would you tell me how can I do that?
    Thanks again!

  3. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    For sure.

    The second selector covers the hover. So you could experiment with adding padding and border to that, something like:

    #header-sidebar .widget_nav_menu ul.menu > li > a:hover {
border: 2px solid #FF0000;
border-radius: 3px;
color: #333;
padding: 5px;
}

    I haven’t tested this but it’s the route I would go down here.

  4. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    To prevent things jumping on hover you can then apply the same padding an border to the first selector. Just make the border color the same as the background color. So on hover you’re just changing the border color.

  5. 9 years, 5 months ago L.A. Ricketson

    Quick related question:

    In Focus Theme (not Premium), I added a custom.css file to the theme root folder so I could customize a bit. I added the header and footer background color code as you suggested above and it had no effect.

    Shouldn’t this work?

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More