Hover Effect Design Adjustment

Store Design
, ,
1

Hi, I need to adjust the design of the hover effect.

Here’s how it currently looks on my store:

CreatorTim_0-1734132122341.png
CreatorTim_0-1734132122341.png462×239 11.3 KB

And this is how I want it to look:

CreatorTim_1-1734132135641.png
CreatorTim_1-1734132135641.png560×324 112 KB

So, I need:

  1. Remove the underline when hovering.
  2. Remove the arrow on the right of “products”
  3. Round the corners of the dropdown menu when it appears.
  4. Add a smooth animation effect so that when you hover over it, it slides out nicely—exactly like it does here when you hover over the store: https://tomnoske.store/

And here is my store URL: https://1049xn-ya.myshopify.com/

Thanks for any help,
Tim

2

Hello @CreatorTim

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.

details[open]:hover>.header__menu-item{
  text-decoration: none;
}
details[hover]:hover .header__menu-item {
      text-decoration: none;
}
.header__menu-item svg.icon.icon-caret {
    display: none;
}
details[open]>.header__submenu{
  border-radius: 10px;
}
.header__menu-item:hover:after{
  display:none;
}

devcoders_1-1734149595218.png
devcoders_1-1734149595218.png1261×588 64.5 KB

3

Hey, I really appreciate your help. It looks good, but I’d still need a few more tweaks.

First, I’d like to bring back the dot. I only wanted to remove the underline and the arrow, but I wanted to keep the dot. Also, I want the dot only on the menu items, not the sub-items.

The second thing I want is to reduce the width of the sliding product menu. There’s too much space on the right side; I want it to have the same amount of space on the right as on the left.

The last thing is that I want the spacing between the menu items to be the same everywhere. Since you removed the arrow, it didn’t adjust, so I’d like the spacing to be consistent throughout.

My store URL: https://1049xn-ya.myshopify.com/

Thanks a lot!
Tim