How to reduce space from the header to the menu on mobile version

[abailea077]

Hi everyone!

Got a problem here!

When I go on the mobile version of my website. When I clic the drop down menu, there is a lot of padding or space between the header and the menu.

For some mobiles they even can not see all the menu because they have so much space! And they can not scroll down to see everything.

You can see the picture here when I customize my store, but when I go with a small cellphone, it’s worst!

Is there a solution or a CODE for reduce that big space on mobile version?

URL:

https://toroeatstreats.com/

But the problem is on mobile because on Desktop the menu is not on dropdown.

Thank you for your help!

[AnneLuo]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the tag

Result:

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

[Tech_Coding]

Hello @abailea077

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px){ .drawer-menu__panel { padding-top: 36% !important; } }

my reply helpful? Click Like to let me know!

your question answered? Mark it as an Accepted Solution.

[topnewyork]

Hi @abailea077 ,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[abailea077]

Thank you so much! It works very well