How to underline drawer menu pages and subpages, arrange them, and create hover effect?

Shopify Discussion

Topic summary

Shopify drawer menu styling and behavior for a storefront’s slide-out navigation. The requester wants: (1) all pages and subpages underlined, (2) menu reordered so product pages remain at the top and “Contact,” “News,” and “Politics” are grouped at the bottom with clear spacing separation, and (3) a hover effect that shows/hides the menu (hover target clarified as the show/hide control, not individual items).

Progress and clarifications: The initial admin-link share was incorrect; a public storefront URL was later provided with the password removed. The helper asked whether policy pages are the ones to separate and what exact hover behavior is desired; the requester confirmed the bottom grouping (Contact, News, Politics) and underlining for both parent and subpages. A screenshot was shared to illustrate the desired layout grouping.

Status: No solution or code has been provided yet. Discussion remains open, pending guidance on theme settings and/or CSS/JS to style submenus, adjust menu order/separation, and implement the hover-triggered show/hide behavior.

Summarized with AI on January 3. AI used: gpt-5.
1

Hello, 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.

2

Hi @Paul143
Can you share your website link to check what you’re wanting to achieve?

Thanks

Sheesh B

3

https://admin.shopify.com/store/ed2597-18/settings/general

4

Hi @Paul143

Thank you for the link but this isn’t working at all.

I need store frontend password if it’s locked.

Sheesh_b_0-1710480836775.png
Sheesh_b_0-1710480836775.png504×212 2.27 KB

Thanks

Sheesh B

5

Hi Sheesh, password is erased, can you try now please ?

https://astral-clothing.com/

Thank you!!

6

Hi @Paul143

But you have contact and news tabs as well. Does policy pages the ones that you want separated from the rest?

Also, what type of hover effect you are thinking and do you want the hover effect on menu or the show/hide menu button?

Thanks

Sheesh B

7

Paul143_0-1710525620408.png
Paul143_0-1710525620408.png563×816 27.5 KB

Hii, I want the ‘Contact,’ ‘News,’ and ‘Politics’ sections to be positioned at the bottom of the menu, distinctly separated from other items. It might be clearer from picture. I’d like each section to be underlined, with clear delineation for pages and subpages.exactly i want the show /hide the menu. Thank you!!