Drawer menu not working on collection page

Store Design
, , , , , , , , , , , , ,

Topic summary

A drawer menu display issue occurs on a Shopify collection page where the menu gets cut off and appears above the logo when scrolling. Screenshots demonstrate the visual problem.

Solutions Provided:

Multiple developers offered CSS fixes:

  • Solution 1: Add CSS code to theme.liquid file above the </head> tag, adjusting padding for .drawer-menu__primary-links and .drawer-menu__panel

  • Solution 2: Request to share the theme.css file contents for analysis and modification of the .drawer-menu__primary-links transform property

  • Solution 3: Apply a media query targeting mobile devices (max-width: 960px) to set the sticky header’s drawer menu panel top position to 0px

Resolution: The issue was successfully resolved, with the original poster confirming one of the solutions worked.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hi,

when scrolling on collection page the drawer menu gets cut off see pic, and goes above the logo etc

ny site is : https://vazluxe.com/collections/zimmermann

62DCF272-C513-4B21-97A3-C64A6443421D.jpeg
62DCF272-C513-4B21-97A3-C64A6443421D.jpeg1170×2532 110 KB

8254A012-DDB5-49B0-9E13-A8D9D7C54EB7.jpeg
8254A012-DDB5-49B0-9E13-A8D9D7C54EB7.jpeg1170×2532 117 KB

1 Like
2 
.drawer-menu__primary-links[data-depth="0"] {
    padding-top: 0px;
}
html.sticky-header-active .drawer-menu__panel {
    padding-top: 90px;
}

Hi @Luxurymrkt

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid Step

3: Insert this code above tag:

Hope this can help you, If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

3

I don’t have direct access to your Shopify theme files, but you can find and paste your theme.css file here, and I can help you analyze or modify it. To locate it: Go to Shopify Admin → Online Store → Themes Click Edit Code on your active theme Open theme.css (or theme.scss.liquid, base.css, etc.) from the Assets folder

.drawer-menu__primary-links[data-depth="0"] { transform: translateX(0); padding-top: var(--item-height); }

Copy the contents and paste them here Once you share it, I can help you edit or troubleshoot it!

4

Hi @Luxurymrkt

You can try to use this code to check if it solved the issue

@media (max-width: 960px) {
    header.is-sticky .drawer-menu__panel {
        top: 0px !important;
    }
}
1 Like
5

Perfect thanks so much

1 Like