Remove white space under header in menu mode

[ellacoker]

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

[Made4uo-Ribe]

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!

[ellacoker]

Hello,

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

[PageFly-Richard]

Hi @ellacoker ,

could you please try this code again 

<style>
@media screen and (max-width: 767px) {
 .menu-drawer__close-button.link.link--text focus-inset {
  margin-top: 0 !important;
 }
}
</style>

And here is result from my side

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

[Vinsinfo]

@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;
}

4. Result will be like,

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

[LizHoang]

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

[PageFly-Richard · Accepted solution]

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 </body>

<style>
@media screen and (max-width: 767px) {
 .menu-drawer__close-button {
  margin-top: 0px !important;
 }
}
</style>

And here is result

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

[ellacoker]

Hi there Richard, unfortunately it didn't solve it in my case 😞

[ellacoker]

[ellacoker]

Its working! Thank you so much Richard.