mobile menu entries should not change color and be underlined when clicked

Hey @webmark487,
In order to remove the decoration and color for the menu items, you can use this CSS code which you can add in the Additional CSS tab:

@media only screen and (max-width: 768px) {
    .has-nav a {
        text-decoration: none !important;
        color: inherit !important;
    }
    .has-nav a:hover {
        text-decoration: none !important;
        color: inherit !important;
    }
}

Hope this helps you!
Kind regards,
Mara

color works, text-decoration does not work (as the line under the link is not a text-decoration)

Hey @webmark487,

Thank you for your quick response!

Sorry for this oversight! That under line can be changed by going in the Customizer -> Header -> Change Menu, there select the wanted Hover Skin Mode, or disable it by selecting the first option.

Hope this helps you achieve the design you want!

Kind regards,

Mara

thank you, only, I need the underline for desktop view. I need to get rid of it in mobile view.


the underline effect comes from:

.m-style>ul>li>.wrap::after{
    background-color:var(--hovercolor,var(--nv-primary-accent,currentColor));
}

so I use this now:

@media (max-width: 768px) {
.m-style>ul>li>.wrap::after{
background:none;
}
}

• This reply was modified 3 months, 2 weeks ago by webmark487.

Hey there!

Great! We’re glad to hear that the problem has been resolved. However, we strongly advise against making changes to the theme, as this can lead to future inconsistencies and compatibility issues.

Best regards,

Mara