This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

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

Open 6 replies premiumthemetheme-vantage
Susana
11 years ago · Last reply by Andrew Misplon 10 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.

Need fast email support? Get SiteOrigin Premium

Replies

6
  1. Andrew Misplon Staff 11 years, 3 months ago

    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. Susana 11 years, 3 months ago

    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. Andrew Misplon Staff 11 years, 3 months ago

    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. Andrew Misplon Staff 11 years, 3 months ago

    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. L.A. Ricketson 10 years, 10 months ago

    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.

Have a different question or issue?

Start New Thread