My navigation menu turns black and not functional on mobile, but only from interior pages

Technical Q&A
1

Narrative Theme.

From mobile only (desktop works fine):

If I click the nav hamburger icon from the front page, the nav menu loads and works fine. Once I get to any interior page, if I click on it - the whole menu turns black, it is not displayed and is not functional.

Site is: www.flydadgear.com

2

Hi, @JoeCat .

Thanks for letting us know about your current issue and what theme you’re using.

I was able to replicate the error of the menu turning black on mobile. Was there any coding applied to your Narrative theme?

I’d like to share a few troubleshooting steps and resources below to help resolve this navigation menu issue.

Troubleshooting Steps:

Since you are using Narrative, a theme powered by Shopify you may be able to have this issue looked into by our Live Support team. If you’re on the Basic Shopify Plan or higher then you can use up to 60 minutes of free design support, used in 15 minute increments. You can learn more about how the Shopify Design Policy works here.

Alternatively, you can also look into hiring a Shopify Expert to assist you with store customization, editing your theme and looking into your navigation menu to ensure it is functioning as expected.

I also had a chance to browse your store and you’ve done a great job of displaying your brands story and showcasing your social media icons. Did you know that you’re able to remove the Powered by Shopify text from your storefront’s footer? Check out our help center resource for steps and a video on how to remove this.

1 Like
3

Hi @JoeCat ,

Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

.site-header {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 12;
}

Hope it helps!

1 Like
4

Thank you @LitExtension , worked perfectly!

1 Like
5

This did cause one small issue. On my internal pages, the very top of the page (beneath the header) is cut off.

6

This did cause one small issue. On my internal pages, the very top of the page (beneath the header) is cut off.

7

Hi @JoeCat ,

Please send me the page link and screenshot, i will help you check it

1 Like
8

Thank you

https://flydadgear.com/pages/sign-up

https://flydadgear.com/pages/features

On both desktop and mobile, the top of the page is cut off.

JoeCat_0-1649108947137.png
JoeCat_0-1649108947137.png562Ă—856 97.7 KB

JoeCat_1-1649108988992.png
JoeCat_1-1649108988992.png1232Ă—737 115 KB

JoeCat_2-1649109063543.png
JoeCat_2-1649109063543.png1376Ă—507 278 KB

9

@LitExtension Thank you, I’ve posted the requested info below

10

Hi @JoeCat ,

Please remove all my previous tutorial code and replace it with the following code, it will work fine:

body:not(.template-index) {
    position: relative;
    height: 100vh;
}

Hope it helps!

1 Like
11

@LitExtension Fully tested in desktop and mobile, THIS works perfectly. Thank you for your help, and I learned something new - i wasnt familiar with “vh” used for dimensions.

1 Like