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

Home Forums Support How to remove the “small line” above menu items

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1402373
    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.

    #1402644
    David
    Staff
    Customer Support

    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;  
    }
    #1402816
    Walter

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

    #1402825
    David
    Staff
    Customer Support

    Glad to hear that 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.