[Resolved] Menu Items Underline

[bluebit]

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?

[Tom]

Hmm strange.

Try making the element absolute:

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

[bluebit]

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

[Tom]

Give this a shot:

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

[bluebit]

thank you, that worked

[Tom]

You’re welcome 🙂

[Flavio]

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!

[Leo]

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 🙂

[Flavio]

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!!

[Leo]

No problem at all 🙂

Glad you are enjoying GP!

[Simon]

Sorry this is in the wrong thread.

[Diana]

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).

[Leo]

Can you open a new topic for your question?

Thanks 🙂

[Author]

Posts