Main menu text hover color

  • Resolved danfog

    (@danfog)


    10 years, 1 month ago

    Hi all, I would like to have the text on my main menu change color when you hover over with a mouse. Ideally I’d like there to be a box show as well behind the menu item, So it will match the effect of the footer navigation menu. The text is white, then changes to primary color and has box appear behind when hovered by mouse. If I can’t have the box appear, it’s not the end of the world.

    the site is http://www.thestudiokw.ca

    I am not experienced with css at all, so if you don’t mind giving some details 🙂 I tried searching support forums, but don’t really understand.

    thanks a lot.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Kevin

    (@jx-3p)

    10 years, 1 month ago

    Here is some CSS that will change the hover color. Just place the code into Appearnce> Theme Options> Advanced Settings.

    ul#menu-main-menu li:hover {
    background: #218C8D;
}

    Let me know if that works for you.

    Thread Starter danfog

    (@danfog)

    10 years, 1 month ago

    thanks kevin, I was hoping you’d have some input for me. That worked great, except I was hoping to have just the text change color, from white to the teal. Not the background. I might keep that code, but change the color, I like the effect.

    thanks again!

    if you go to the very bottom footer menu and hover over ‘terms’ or ‘privacy’ that’s the effect I was hoping for.

    Ben Ritner – Kadence WP

    (@britner)

    10 years, 1 month ago

    .kad-header-style-basic #nav-main ul.sf-menu li a:hover {
    color: #218C8D;
}

    Try that css ^

    Kadence Themes

    Thread Starter danfog

    (@danfog)

    10 years, 1 month ago

    Thanks Kadence, that also worked great!!! one bug with it, when you hover a sub-menu item, the background turns same color as text, so it’s not visible.

    I think I’m going to stick with Kevin’s background effect. I like how it matches the hover of the sub-menu items.

    thanks all!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Main menu text hover color’ is closed to new replies.