-
I previously used the code below I think kindly provided by David in the old forum. I was using it on a menu without drop-down menus and it worked great.
But now I wanted drop-down menus and the cool red underline does not look good on the drop-down menus.
How can the code be adapted to not apply to the drop-down menus:
`@media(min-width: 1024px) {
.main-navigation .main-nav ul li a {
position: relative;
}
.main-navigation .main-nav ul li a:after {
content: ”;
position: absolute;
bottom: 4px;
left: 20px;
right: 20px;
height: 3px;
background-color: transparent;
transition: background-color 0.2s ease;
}
.main-navigation .main-nav ul li:hover a:after,
.main-navigation .main-nav ul li[class*=”current”] a:after {
background-color: #f00;
}
} -
Hi there,
Could you provide a link to your site?
-
Hi, as stated, I am not using the code. I can put it on a non critical site for you to look at if you wish.
But the inspiration came from this site:
-
Try changing the CSS to this:
@media (min-width: 1024px) { .main-navigation .main-nav > ul > li > a { position: relative; } .main-navigation .main-nav > ul > li > a:after { content: ""; position: absolute; bottom: 4px; left: 20px; right: 20px; height: 3px; background-color: transparent; transition: background-color 0.2s ease; } .main-navigation .main-nav > ul > li:hover > a:after, .main-navigation .main-nav> ul> li[class*="current"]> a:after { background-color: #f00; } }If it doesn’t work, please provide your site link.
Let me know 🙂
- You must be logged in to reply to this topic.