[Resolved] How to remove little lines above every element of nav menu

[Juan]

Hi, how are you doing?

My web is https://gran.salon/ and it’s built over Artisan from the site library. I would like to know how can I remove those little lines that appear over the elements of the menu in the navigation (they appear when doing mouseover and they remain static above the current page).

Thank you very much,
Juan

[Leo]

Hi there,

Go to Additional CSS field in the customizer and remove this block of CSS:

.main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    right: 50;
    left: 50%;
    top: 0px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: block;
    width: 0;
    height: 2px;
    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: 30px;
}

[Juan]

Thank you so much, Leo, you’re the best!

[Leo]

No problem 🙂

[Author]

Posts