Adding hover over to primary nav text

Hi Ben,

You can achieve what you are after by adding following Custom CSS to your theme using Advanced CSS Editor plugin.

.primary-navigation li a, .site-navigation a:hover, .site-navigation .current-menu-item > a, .site-navigation .current-menu-item > a, .site-navigation .current-menu-ancestor > a:hover{
    background-color: transparent;
}
.primary-navigation a:hover{
    color: #FFF000;
}

Replace the HEX code according to your needs. Hope it helps.

Yes that did work thank you….but how to keep the colour for the active menu page?

Actually the changes only worked within customizer. The site is not accepting the changes.

I think the theme is overriding the changes. I have also tried adding your code to my child theme’s CSS style sheet….still no change.

i’m new to css but try add this to your css file, change [blue] the color or hex as you needed.

li.menu-item a:hover{
	color:blue;

}

and for to keep color for the active menu page just change hover to active.

li.menu-item a:hover{
	color:blue;
	background-color:transparent;

}
li.menu-item a:active{
	color:blue;
	background-color:transparent;

}

your menu item is registered under class menu-item,
note, i’m using chrome dev tools and found that class, but u should back up your css before change or add any codes.

sincerely,
jjerro

Thank you jjerro,

The hover over works, maintaining the colour for the active menu page does not.

sorry, my bad, try;

li.menu-item a:visited{
background-color:red;
color: red;
}

i’m not sure this is what you are looking for..
by using :visited pseudo class, this should change the button[or area] and text of menu page to red when the menu is visited, but it is not revert the color of the recent visited menu when you open another menu page, except you clean the browser history…

try to read this.. using jquery for your menu..

sincerely,

jjerro

ps: this is from w3school, about using pseudo class.

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.

I am trying to add a menu item and a hover over description? I cannot find any help on this. Please direct in the right path.

• This reply was modified 8 years ago by bamarich69. Reason: email response necessary
• This reply was modified 8 years ago by bamarich69. Reason: spelling