Change Underline Colour in Nav Menu (different colour to text)

Ask the community
, , ,
1

Ok, so obviously I’ve figured out how to get an animated underline in the nav menu (when you hover on a menu item e.g. “Home” or “Blog”) or whatever.

What I’m finding impossible is to create it so that the underline is a different colour to that of the text.

It doesn’t like/allow for a simple CSS styling and doesn’t like multiple js versions I’ve tried much either.

Has anyone else encountered or (preferably) fixed this?

Any help would be really gratefully received.

The animated underline colour I’d like is: #d83c3c

3

Hi, @James_Leatherbarrow !!

I suspect you are currently using the “Underline” option from the “Animation Package” in the horizontal menu settings to achieve the underline animation. Indeed, it seems that by default, you cannot separate the text color from the underline color. I also looked around quite a bit but couldn’t find a way to do it (there might be a setting somewhere, though…).

Since I couldn’t find it, I briefly checked the actual HTML structure on the live site. It appears that the underline is not a pure text underline but is implemented using a pseudo-element. :innocent:

After some trial and error, I happened to discover that you can change the underline color alone by using this simple selector. It might not be the exact selector, but it seems to work, so please give it a try! :laughing:

Please set the menu text color from the Wix Studio editor as usual, and then add the following code to your global.css file. I was also able to change it to a rainbow color. Just for your reference. :innocent:

.horizontal-menu__item-label::after {
  background-color: #d83c3c !important;
}

.horizontal-menu__item-label::after {
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  ) !important;
}
2 Likes
4

That’s actually fantastic. Thank you so very very much. I can’t express how grateful I am to you for taking the time to do this. You are a complete star. Thank you again.

5

Just a side note to this: I tried so many things for hours and hours, including writing a really long script version, and turns out it’s just two lines of simple CSS after all.

I can’t believe it. But I really want to reemphasise how amazingly grateful I am to you.

6

I’m really happy to have received so many responses—it made all the effort I put in feel worthwhile. Of course, it would be ideal if this could be done using Wix Studio’s default functionality, but for now, I’m satisfied since it worked this time. That said, I think this was purely a lucky break. :innocent:

If you check the live site’s HTML using your browser’s developer tools, you’ll see that this selector is probably not a precise one. It just happens to be working for now—like a fluke—because it’s a simple selector. I’m not particularly strong in this area, so I don’t feel inclined to put much more thought into crafting a perfectly accurate selector. Ideally, someone with more expertise could refine it if necessary. :kissing_face:

If this setup is only working by coincidence, it’s possible that it could stop working in the future if Wix changes the underlying structure. But that would also be true even if we wrote a perfectly accurate selector right now—in fact, that might be more likely to break. :melting_face:

So, for the time being, I’ve decided that the simplest code—one that’s broad enough to likely match by coincidence and that assumes Wix will continue using pseudo-elements for animations—will do just fine. That’s the reasoning behind my decision to be content with this minimal code. :innocent:

I also learned a lot while answering your question, so thank you for that! Wishing you a great Wix life! :grin: :raising_hands:

1 Like