How can I modify menu hover animations on my website?

Store Design
1

Hi, anyone knows how to remove the underlining animation that appears on a menu section after i hover my mouse over it?

davidvilaa_0-1692723996697.png

Besides, i would like to add a new animation bolding the selected menu section when hovering the mouse over it.

My web is: https://centralmrkt.myshopify.com
Pass: 90210

Thanks!

2

Hi @davidvilaa ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

I realize this situation isn’t exactly what you’d hope for, but I’ve got a potential solution that I’d like to share with you:

  1. Go to Online Store → Theme → Edit code.
  2. Open your assets/base.css file.
  3. Add the code at the end of the file:
.header__menu-item:hover >span {
    text-decoration: none !important;
    font-weight: bold;
}

Best regards,

Anthony

1 Like
3

thanks, it worked!

Now, I have another problem. When I click on any menu section entering to it, it remains that underline. Any idea?

Thanks!

davidvilaa_0-1692725057561.png
davidvilaa_0-1692725057561.png1865×726 80.1 KB

4

Hi @davidvilaa ,

You can add more this code below to base.css

span.header__active-menu-item {
    text-decoration: unset;
}
span.header__active-menu-item:hover {
    font-weight: bold;
}
1 Like
5

Damn, thanks! U the goat!