Why is content getting cut off on mobile view of my nested menu pages?

Store Design
,
1

Hi,

I have inherited a shopify site and am trying to troubleshoot. This is odd.

On mobile devices only, content is cut off at the top, and when you expand the menu, it shows up but covers the menu.

In addition, it only occurs for pages that are ‘nested menu’ pages, not on ones that are only one item.

I’m including two screenshots. Note ‘Gourmet Spice’ and the top of Blends is cut off in the first one, and you can see the full title cutting off the dropped down menu in the second. Again only on mobile. Can anyone help?

Maybe we could simply add a margin to the top of mobile pages? The margin is pretty thin across the whole site.

The site is https://bigcovefoods.com if you want to take a look yourself.

Please? :slightly_smiling_face:

Screenshot_20221207-111234.jpg
Screenshot_20221207-111234.jpg1080×2400 233 KB

Screenshot_20221207-111215.jpg
Screenshot_20221207-111215.jpg1080×2400 181 KB

2

Hello @WillCJ

It’s GemPages support team and glad to support you today.

Your problem occurs because you add css to pull the content above -50px

I would like to give you a solution to support you:

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

GemPages_0-1669618959296.png
GemPages_0-1669618959296.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before :

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

3

This was exactly the solution!! Although in my SPECIFIC case I used -5 instead of 0. Looks perfect now. Thank you so much, with your help my friends think I am le genius, when it’s you all along.

Hahaha!

Thanks again,

WillCJ

4

I am glad that my recommendation is helpful to you :grin: .