Menu Items Underline

My safari Version 11.0.3, think its the lastest one, so it should work right? So if i have the latest Safari, and it works for you and not for me, what is causing me to not see it correctly?

Hmm strange.

Try making the element absolute:

.main-navigation li a:after, 
.secondary-navigation li a:after {
    position: absolute;
}

making it absolute worked. How can I disable the underline when i hover over the shopping cart icon and when shopping cart icon is selected? Maybe have the underline under the shopping cart transparent all the time, no color?

https://aguamarina.co

Give this a shot:

.main-navigation li.wc-menu-item a:after {
    display: none !important;
}

thank you, that worked

You're welcome :)

Hello,

I have used the code above to underline the menu items and it works great on a desktop. However on mobile devices the line extends beyond the menu items (iPhone 7 test). Is there a way for it to either only extent the length of each word or just simply not work on the mobile menu?

Thanks!

Wrap the code in media query like this so it's desktop only:
https://docs.generatepress.com/article/adding-menu-hover-animation/

More info:
https://docs.generatepress.com/article/responsive-display/

Let me know :)

Thanks Leo, it worked!

I've only been building my site for a few days and I am very impressed with Generatepress. You guys rock and your documentation is very informative. I truly appreciate all you guys do for our community.

Thanks again!!

No problem at all :)

Glad you are enjoying GP!

Sorry this is in the wrong thread.

Hi,

I used this CSS I found in this topic:

.main-navigation li a:after {
opacity: 0;
transition: opacity 500ms ease-in-out;
content: "";
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a:after,
.main-navigation .main-nav ul li:hover > a:after,
.main-navigation .main-nav ul li.sfHover:hover > a:after {
content: "";
display: block;
width: 100%;
border-bottom: 1.5px solid #59e5ee;
position: relative;
top: -10px;
opacity: 1;

It works, but I'd like the color of the line below the current item to be different than the color in the hover position. I can change the color in the above CSS, but I don't know how to achieve two different colors depending on the position (current vs. hover).

Can you open a new topic for your question?

Thanks :)