Archived topic
How to insert a Link Hover Effect (Border Bottom color) in my menu?
7 replies · Started by Cristiano on August 31, 2021
How to insert a Link Hover Effect (Border Bottom color) in my menu?
I would like to insert Link Hover Effect, a red line at the bottom edge of the menu, so that it looks the same as what I sent in the sensitive area.
My website works like this:
I would like to get this effect:
Can you help me, please?
Hi there,
You can try this CSS:
.main-navigation ul li:hover > a {
text-decoration: underline;
text-decoration-color: red;
text-decoration-thickness: 3px;
}Or if you need to adjust things better, go with this instead.
.main-navigation ul li > a:after {
content: "";
background-color: red;
width: 80%;
height: 3px;
position: absolute;
bottom: 20%;
left: 50%;
transform: translateX(-50%);
display: none;
}
.main-navigation ul li:hover > a:after {
display:block;
}Hi, thanks for your attention! Could you provide me with code that only works on the main menu? I don't need this effect in the submenu. Best Regards!
Try this:
.main-navigation .main-nav> ul > li > a:after {
content: "";
background-color: red;
width: 80%;
height: 3px;
position: absolute;
bottom: 20%;
left: 50%;
transform: translateX(-50%);
display: none;
}
.main-navigation .main-nav > ul > li:hover > a:after {
display:block;
}It worked, thank you very much!
You are welcome :)
I like this! But how do I make it to only display on desktop? (not mobile and tablet).
Hi there,
you can use an @media query to wrap the CSS ie.
@media (min-width: 769px) {
Add your CSS here to apply to desktop only
}More info here:
https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints
