Remove white space under header in menu mode

Topic summary

A Shopify store owner identified unwanted white space appearing above the secondary menu in their mobile header drawer. The space was only visible when navigating to subpages (Products, About, etc.), not on the homepage.

Attempted Solutions:

  • Initial CSS targeting .js .menu-drawer height properties
  • CSS adjusting .menu-drawer__close-button margin
  • One responder reported no visible issue on their end

Resolution:
PageFly-Richard provided a custom CSS solution using <style> tags in the theme.liquid file, targeting .menu-drawer__close-button with margin-top: 0px !important. After an initial unsuccessful attempt, a revised version of the same code successfully removed the white space.

Status: Resolved. The original poster confirmed the final solution worked.

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

Hello,

So, I have this extra white space in the secondary menu. The first menu doesn’t have it, but then if I click on product / about / etc. it has a small white space that I would like to remove. Any ideas?

URL: https://www.samiyaskincare.com.au/

PW: ellacoker

1 Like

Hi @ellacoker

Do you mean like this?

If it is try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.js .menu-drawer {
    height: min(
        min-content,
        calc(100vh - 100%),
        calc(var(--viewport-height, 100vh) - var(--header-bottom-position, 100%)) 
    ) !important;
}
  • And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

Hello,

See screenshot below for what area I mean… thank you. Its only small but still noticeable

@ellacoker Please follow the below steps to remove the space displaying above the secondary menu in header drawer. Let us know whether it is helpful for you.

  1. Go to “Online stores” → “Themes”.
  2. Click action button from the current theme and select “Edit code”.
  3. Search “base.css” file and paste below CSS code at the bottom of the file.
.menu-drawer__close-button {
  margin-top: 0px !important;
}
  1. Result will be like,

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

Hi @ellacoker , thanks for reaching out.

I checked the secondary menu and everything appears to be aligned correctly on our end. Could you please try clearing your browser cache or checking in an incognito window to see if the issue still persists?

Please take a look at my screenshot for further details:

I hope my information is helpful to you, and please feel free to feedback.

Liz

This is Richard from PageFly - Shopify Page Builder App
Hi @ellacoker Please add code here to fix it:
Step 1: Online Stores > Themes > Edit code
Step 2: Choose file theme.liquid
Step 3: Add code above the tag


And here is result

Hope my solution will help you resolve the issue.
Best regards,
Richard | PageFly

Hi there Richard, unfortunately it didn’t solve it in my case :disappointed_face:

Hi @ellacoker ,

could you please try this code again


And here is result from my side

Hope my solution will help you resolve the issue.
Best regards,
Richard | PageFly

Its working! Thank you so much Richard.