How can I set the hover color for the links in the header menu? I did set a global hover color for links and that works fine for links within the content but not for the menu.

Is there a way to set a hover color for these? Seems like a common thing, that it’s hard to believe it isn’t possible.

The main code for the menu hover effect is this:

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul,
.top-navigation ul li:hover > ul,
.top-navigation ul li.focus > ul {
  left: auto;
  right: 0; }

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul,
.top-navigation ul ul li:hover > ul,
.top-navigation ul ul li.focus > ul {
  left: 100%; }

I am using the OceanWP template. There I activated the underline when hovering over menu items. Can you tell me custom css code to keep the underline for the active menu? I want to display the user where he is located.

On first load the menu works fine. But on reload or click to another page the hover area to click is super tiny. The hover action color change disappears almost immediately.

There is a line that follows cursor on reload, but isn’t there on first load.

It looks like the author used superfish ? “sf-menu”

I can post the css & functions.php codes if needed.

Thank you for your help.

My site above, I’m hearing that when people are on their mobile devices, they are having trouble finding the drop down submenus because the little arrow to click them on the right is too small. Is there any way I can have it drop down with just a click on the word and not the tiny arrow?

I’d like my menu to be like a set of buttons that you hover over and they change colour, like on https://lefooding.com .. As you can see, they have it so the text is black and then changes to white with a black filled rectangle around it when you hover. I’d like that too.

My site is www.ouishi.com and uses the Simplemag theme..

Many thanks

Here on my website https://www.collectifsaga.com/X/wordpress/fr/home-fr/ , I have a menu on hover.
In the menu, there is some filters (architecture, news …) to reorganize the grid (displaying the posts).
The problem is when I click on a filter, I would like the menu disappear. It’s a small thing, but to have a clean webpage when I select a filter I would like to have only the logo at the top and the the grid with a few elements and not the menu.

Of course the menu disappear when the mouse is out of it, but I would like it disappears right after clicking on a filter.

Do you have an idea how to make it ?

Here is my CSS:

#nav, #nav ul {
   align-text: left;
   list-style: none;
   max-height: fit-content;
} 

#nav a {
   display: inline-block;
} 

#nav a:hover {
   display: inline-block;
} 

#nav li {
   float: left;
}

#nav li ul {
   position: absolute;
   left: -999em;
} 

#nav li:hover ul {
   left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
   left: auto;
}

And the same on mobile devices

Thanks a lot for your help : )

I’m trying to change the menu hover color from the primary colour of the site to white.

I’ve tried the following:

.menu-item-37 a:hover {
color: white;
}

#mainnav ul li a:hover {
color: white;
}

and about 50 other different ways.

If I add in background-color: white;

that will work and give it a new background on the hover over, however I can’t target the text in my CSS.

Some help on this would be much appreciated!

Thanks