Hover effect issue.

Store Design
, ,
1

Hi guys, I need help fixing the hover effect.

When I hover over the menu item “Products” the menu with the sub-items (products) slides out normally. However, when I want to access the overall product overview by clicking on “Products” the menu opens/closes instead.

Right now, the effect works on both hover and click, so I can’t just go to “Products.”

I want to activate the menu only on hover so I can click on “Products” to access the product overview.

Here’s my store URL: https://1049xn-ya.myshopify.com/

And here’s the code I used for the effect:

Thank you!

Tim

2

Hi @CreatorTim ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code

EBOOST_1-1672356985580.png
EBOOST_1-1672356985580.png532×438 15.6 KB

  1. Snippets/header-dropdown-menu.liquid

  2. Find summary tag

  3. Wrap a tag outside link title

  4. You can refer screenshot below:

the top level has been wrapped by

EBOOST_2-1734405717784.png

the child level has been wrapped by

EBOOST_1-1734405677111.png
3

Hey, it works, BUT I don’t know why “Products” is highlighted in purple, and when I click on it, it flashes red. Also, when I click on another menu item or sub-menu item, sometimes an underline flashes there as well.

How can I fix this?

Here are the photos of how I wrapped it in the edit code:

CreatorTim_0-1734461741352.png
CreatorTim_0-1734461741352.png639×277 10.3 KB

CreatorTim_1-1734461765974.png
CreatorTim_1-1734461765974.png871×166 8.44 KB

And here’s my store URL so you can check it: https://1049xn-ya.myshopify.com/

Thanks a lot for your help,
Tim

4

Hi,

May I suggest add code below to end of Assets/base.css file

.header__menu-item a{
	text-decoration: none!important;
	color: rgba(var(--color-foreground),.75);
	outline: none !important;
    box-shadow: 0 0 0 !important;
}
.header__menu-item a:hover {
	color: rgb(var(--color-foreground));
}
body .header__menu-item {
	outline: none !important;
  	box-shadow: 0 0 0!important;
}
body .header__menu-item:hover::after {
	display: none;
}
5

Hey, thanks! It works, but it removed all the decorations. I had a dot under the menu items, and I’d like to keep it there.

Would you be able to bring the dot back under the menu items, but only for the menu items (not the sub-items) and without the other decorations?

Thank you so much, I really appreciate your help.
Tim

6

Hi,

You can refer screenshot below to update code.

EBOOST_0-1734489126914.png
EBOOST_0-1734489126914.png1087×412 22 KB

7

Thank you so much. It’s working.

I really appreciate it.
Tim