Archived topic
Nav menu Hover State issue (menu hover animation)
5 replies · Started by Paul on September 30, 2021
Hi There :)
I added the menu hover animation CSS that you documented here:
https://docs.generatepress.com/article/adding-menu-hover-animation/
Which works great apart from the contact link where the position of the underline is misaligned also has its own class applied to it to make it a button.
Any ideas on how I could fix the css to align the underline on hover on 'Contact' (please see link in private info)
Thank you
Hi Paul,
The added margin left by this custom CSS is messing with the alignment.
/* adds a button to the navigation – must add nav-button to the menu items CSS class field */
.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a {
color: rgba(255,255,255,1);
border: 3px;
border-style: solid;
line-height: 36px;
border-radius: 40px;
margin-left: 20px;
transition: all 0.6s ease 0s;
}If you want to add extra spacing, consider adding margin-right to the menu item to its left instead. :)
Hi Elvin,
Much appreciated!
Would there be a way to not use the underline hover effect at all on this menu item (contact)?
Cheers
Paul
Hi there,
add this CSS:
.main-navigation .main-nav li.nav-button a:after {
display: none;
}THANK YOU David - you are a CSS master!!
Paul
Glad to be of help !
