Archived topic
Navigation green hover lines
9 replies · Started by Andrew on February 25, 2022
Hello,
I added custom CSS to add a hover line above each menu item in my desktop navigation. However, I noticed that the line is off centered for all menu items that have a drop down. The line is longer on the left side of each item than it is on the right. Below is the custom CSS, and you can see the issue by going to my site prudentreviews.com and hovering over the navigation menu items.
I'm sure I'm overlooking something. Could you please take a look?
.main-navigation .menu > .menu-item > a::after {
content: "";
position: absolute;
right: 50%;
left: 50%;
color: #16a286;
top: 5px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
width: 0;
height: 3px;
background-color: currentColor;
transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item:hover > a::after,
.main-navigation .menu > .menu-item > a:focus::after,
.main-navigation .menu > .current-menu-item > a::after{
width: 90%;
color: #16a286;
}
Hi there,
yeah thats because menus with drop downs have the toggle and that affects the width.
Can you share a link to where i can see the issue? - might be able to tweak the CSS to correct that.
Oh okay - I just recently removed the carrot on those drop downs, so that must be the issue. Hopefully there's an easy fix.
I used this CSS to remove the carrots
@media (min-width: 769px) {
.menu-item-has-children .dropdown-menu-toggle {
display: none;
}
.main-navigation .main-nav ul li.menu-item-has-children>a {
padding-right: 10px;
}
}
Yeah you have to add back the padding in place of the missing caret with this CSS:
@media (min-width: 769px) {
.main-navigation .main-nav ul li.menu-item-has-children > a {
padding-right: 21px;
}
}That worked, thank you. I was thinking about removing the green lines and instead just changing the font one hover. Is there a way to do that on the main desktop menu items without changing the hover color across the whole site?
Do you mean change the Font Family eg. from Times to Arial?
I mean change he font color and maybe make it bolder when a user hovers. More concerned with the color than the boldness.
In Customizer > Colors you can set the Hover color for the Primary Navigation.
Chaning weight to bold, i wouldn't advise ( like changing font family ) it can lead to layout shift on hover.
Thanks so much you for help!!
You're welcome
