Archived topic
Excluding one menu item from being underlined
3 replies · Started by James on November 22, 2017
Hey, quick question. I know the topic of creating underlined nav menu items being hovered over has been discussed. I was wondering, is there a way to make it to where one of my menu items is not underlined? I have my logo in the center of the nav between menu items, and I’d like that to not be underlined. I know I can add a class to the logo, something like .center-logo.
Here is this css I'm using provided by Luiz Bills:
/* nav links effect */
.main-navigation .menu > .menu-item > a::after {
content: "";
position: absolute;
right: 0;
left: 50%;
bottom: 15px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
width: 0;
height: 2px;
background-color: currentColor;
transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
width: 50%;
}Thanks for any help.
Best,
James
Hi James,
First add a custom class, menu-hover, to the menu items you want to have hover effect:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes
Then edit the code to this:
@media (min-width:769px) {
/* Menu Hover underline animation */
.main-navigation .menu > .menu-item.menu-hover > a::after {
content: "";
position: absolute;
right: 0;
left: 50%;
bottom: 2px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
width: 0;
height: 2px;
background-color: currentColor;
transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.menu-hover.current-menu-item:not(.exclude-hover) > a::after,
.main-navigation .menu > .menu-item.menu-hover > a:hover::after {
width: 50%;
}
}Let me know :)
That worked like a dream.
Thanks again, Leo!
Best,
James
No problem :)
