Archived topic
Green line flashing when I hover over navigation items
6 replies · Started by Andrew on March 27, 2023
Hello,
I just noticed a green line flashes in my header when I hover over a navigation menu item and then move the cursor off that item. In the past, I had a small green line appear beneath each menu item on hover. But since I added sub menu items (drop down), I believe I removed that. It seems like there's some CSS there that shouldn't be there, but I'm not sure what it is.
Details in the private section.
Thank you!
I believe it has something to do with this CSS, which I used to put a border around the submenu drop down box. When I change the "border:1px" to "3px", the border AND the green line get thicker. Not sure why the green line is showing though. I appreciate your help!
@media (min-width: 769px) {
nav .main-nav .mega-menu {
position: static;
}
.main-navigation .sub-menu {
border: 1px solid #16a286
}
.main-navigation .sub-menu > li:not(:last-child) > a {
border-bottom: 1px solid #d7d8d9;
}
.main-navigation .sub-menu > li > a {
margin-left: 10px;
margin-right: 10px;
}
Hi Andrew,
The CSS is for creating a simple mega menu, as you are not using mega menu now, you can safely remove this CSS and fix the line issue.
Which part of the CSS should I remove? If I remove all of it, I lose the styling around the drop downs/sub menu items.
Remove
nav .main-nav .mega-menu {
position: static;
}change:
.main-navigation .sub-menu {
border: 1px solid #16a286;
}to
.main-navigation ul li:hover ul.sub-menu {
border: 1px solid #16a286;
}That worked, thank you so much!
No problem :)
