[Resolved] Artisan menu style

[Ketil]

Hello.
I’m using Generatepress Premium, and Artisan from the site library. I have made it a “one page”-setup, where main menu points to anchors on the page. Side effect is that all links in main menu now has “active” style ( overline ).
How do I remove the overline? ( css was to complex for me to figure out what style to put in css )

[Leo]

Hi there,

So you want to keep the hover effect right?

If so then go to Additional CSS field in the customizer and replace:

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

With:

.main-navigation .menu > .menu-item > a:hover::after, 
.main-navigation .menu > .menu-item > a:focus::after {
    width: 30px;
}

Let me know 🙂

[Ketil]

Yes, worked, thanks!

[Leo]

No problem 🙂

[Heather]

i tried this but it didnt work. Id like to get rid of the hover line above when active.

[David]

Hi there,

would you mind raising a new topic where you can add your Site URL so we can take a look and give you 100% focus.

[Dan]

How does one remove the overline completely from all active menu items?

This tutorial doesn’t seem to explain that…?

[Leo]

Hi there,

Modify this block of CSS in the Additional CSS field in the customizer:

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

to this

.main-navigation .menu > .menu-item > a:hover::after,
.main-navigation .menu > .menu-item > a:focus::after {
    width: 30px;
}

Let me know if this helps 🙂

[Dan]

Yes, that does work! Not sure how I missed it the first time or why it didn’t apply. Probably page caching.

Thank you!

[Leo]

No problem 🙂

[Author]

Posts