Archived topic
How to remove the "small line" above menu items
3 replies · Started by _blank on August 14, 2020
Viewing posts 1–4 of 4
- Using GeneratePress, GenerateBlocks en GP Premium.
- In GP Premium I have imported an example Site (one created by Mike Oliver).
- On each current Menu Item and on each Menu item where I hoover with my mouse there is a small white colored line above the text of the menu item.
- Where can I remove this line?
- All the settings for colors, sizes etc. works fine in the Customizer but there is no setting to remove this line.
Hi there,
the Site imported some Customizer > Additional CSS which included adding those lines. Delete this from the Additional CSS:
/* navigation rules */
.main-navigation .menu > .menu-item > a::after {
content: "";
position: absolute;
right: 50;
left: 50%;
top: 5px; /* controls where the line appears on hover */
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
width: 0;
height: 2px; /* controls thickness of the line */
background-color: currentColor;
transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item > a:hover::after,
.main-navigation .menu > .menu-item > a:focus::after,
.main-navigation .menu > .current-menu-item > a::after{
width: 40px; /* controls the width of the line */
color: #ffffff;
}Hi David, thanks a lot and that solved the issue (and I learned a bit)
Glad to hear that :)
This archived topic is closed to new replies.
