How can I underline subpages and create a hover effect in my drawer menu?

Technical Q&A
1

Hello Guys ,I’ve asked this before but I haven’t succeeded yet. I’m new here and have three questions regarding the drawer menu:

I’m trying to underline pages, but when I do, the subpages aren’t underlined. How can I ensure both pages and their subpages are underlined?

My menu includes seven pages; four are related to my products, and three are dedicated to terms and conditions. I would like the three terms and conditions pages to appear at the bottom of the menu, separated from the product pages by a space—effectively grouping the four product pages at the top and the three terms pages at the bottom.

How can I create a hover effect for drawer menus?

Thank you very much in advance.

discusion.PNG
discusion.PNG1876×957 239 KB

Astral Clothing (astral-clothing.com)

2

hey @Paul143

Your store is locked can you share the password?

1 Like
3

Hii, I deleted the password, can you try now please? Thankyou

4

Here this code will add underline to the rest of your line

.menu-drawer__menu-item, .list-menu__item, .link, .link--text, .focus-inset {
    text-decoration: underline!important;
}
1 Like
5

Thankyou very much! maybe do you know the solution to the second problem? best regrads

6

What kind of hover effect you need in the drawer?

and for separating the menus of policy and products it require theme code customization, and I won’t be able to provide guide here it’s quite complex sorry.

1 Like
7

Yes I do know separating the menus will require HTML change rather than just CSS.

Also what kind of hover effect you need in Drawer