Archived topic

Background hovering color of a "transparent" background menu

7 replies · Started by Kle on April 21, 2018

Viewing posts 1–8 of 8

April 21, 2018 at 9:04 pm #556906

Hi there,

I have a trasnparent background for a menu item to avoid being higlighted (with the Background Current feature) when a visitor is in that specific page. The problem is that if it has sumbenus, when hovering over the submenus the "primary" menu item (from which the submenu belongs to) goes trasnparent and not the hovering color I have asigned to it's background.

How can I have it to show the backround color when hovering over the submenus while also trasnparent when a visitor is in that page?

This is how I have it now:

#menu-item-1747 a {
background-color: transparent;
color: #595959;
}

#menu-item-1747 a:hover {
color: #FFFFFF;
background-color: #E5E5E5;
}

Thank you:)

April 21, 2018 at 9:46 pm #556922

Hi there,

What if you replace:

#menu-item-1747 a:hover

With:

#menu-item-1747:hover a

April 21, 2018 at 9:57 pm #556933

Thank you Tom, almost there:)

Just one thing, the submenu gets the backgrounf highlited with the same color as the primary menu. What is the css code to give the submenu a different background color (as the rest of my menu) and that also changes when hovering over?

April 22, 2018 at 9:25 am #557299

Sub-menus have their own color options in "Customize > Colors > Primary Navigation".

Let me know if that helps or not :)

April 22, 2018 at 11:18 am #557361

I´ve been using that feature since day 1:) but with this css intervention we've made the menu/submenu gets funky when hovering. The submenu won't change the color neither the primary menu. They just go grey and won't take the customizer settings.

If you could take a quick look at my site you'll see what I mean. I have another item right besides it that has a submenu and that one displays correctly the settings I have made with the customizer and would like the other item to behave like that as well.

Thank you:)

April 22, 2018 at 9:24 pm #557602

Ah, gotcha. Try this as your CSS:

#menu-item-1747 .main-nav > ul > li > a {
    background-color: transparent;
    color: #595959;
}

#menu-item-1747 .main-nav > ul > li:hover > a {
    color: #FFFFFF;
    background-color: #E5E5E5;
}

April 24, 2018 at 4:52 am #558901

Perfect!! Thank you Tom!

April 24, 2018 at 8:27 am #559160

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.