[Resolved] How to remove the “small line” above menu items

[Walter]

– 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.

[David]

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;  
}

[Walter]

Hi David, thanks a lot and that solved the issue (and I learned a bit)

[David]

Glad to hear that 🙂

[Author]

Posts