How can I fix mobile navigation menu issues on Narrative theme?

Solved

How can I fix mobile navigation menu issues on Narrative theme?

camilllebrown
Tourist
4 0 1

Hi Everyone,

 

I was wondering if I can get some help with the mobile nav wrapper and header. I'm working on a site that was previously built by another developer so I'm unsure if these are theme issues or potential user changes from the previous developer. Any help is welcome!

 

Firstly, here is a picture of whats happening right now.

Screen Shot 2022-04-11 at 8.47.16 AM.png

 

 

So There's a couple of things that are wrong and I'm not sure on how to fix it. 

 

1. Each sublink container is auto expanded upon opening of mobile nav

Each .navigation__sublinks-container automatically opens when the mobile nav is active which is not the behavior we want for user experience. Also despite each having display: block set, each container overlaps with the other .navigation__sublinks-containers as well as the parent navigation__links. Is there a way to having each .navigation__sublinks-container only expand upon click of the parent .navigation__link button and populate the .navigation__sublinks-container directly below the parent?

 

2. The sublink menu upon expansion is transparent making it hard to read.

As shown in the image above, I have the background color set for each container to background-color: #f4f1ec. However, it's still transparent and therefore makes the other content unreadable. I've tried changing the z-index to 2 or 999 with no luck. Any ideas how to fix this?

 

3. The first sublink menu upon expansion cuts off content that should be included.

The shop dropdown has two subcategories that are cut off when expanded. See below for existing issue versus what should be seen. I assumed this was due to min-height issues but adjusting this value did not correct the problem. 

 

Screen Shot 2022-04-11 at 8.59.27 AM.png

Screen Shot 2022-04-11 at 9.02.30 AM.png


Thanks in advance! Please let me know if I should send any supporting code or my site URL.

Accepted Solution (1)
LitExtension
Shopify Partner
4901 1004 1177

This is an accepted solution.

Hi @camilllebrown,

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

@media only screen and (max-width: 925px) {
	.navigation__sublinks-container {
		display: block;
		position: relative;
		text-align: center;
		padding-bottom: 10px;
		padding-top: 10px;
	}
	.navigation__has-sublinks--collapsed .navigation__sublinks-container {
		display: none;
	}
	.navigation__sublinks {
		text-align: center !important;
	}
}

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com

View solution in original post

Replies 4 (4)

LitExtension
Shopify Partner
4901 1004 1177

Hi @camilllebrown,

Please send your site and if your site is password protected, please send me the password. I will check it.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com
camilllebrown
Tourist
4 0 1

Hi @LitExtension ! Thank you for taking a look. Here is the site: https://overnight-bty.myshopify.com/

It should not be password protected but if you happen to run into an access issue, try this password: Overnightbty2020!

LitExtension
Shopify Partner
4901 1004 1177

This is an accepted solution.

Hi @camilllebrown,

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

@media only screen and (max-width: 925px) {
	.navigation__sublinks-container {
		display: block;
		position: relative;
		text-align: center;
		padding-bottom: 10px;
		padding-top: 10px;
	}
	.navigation__has-sublinks--collapsed .navigation__sublinks-container {
		display: none;
	}
	.navigation__sublinks {
		text-align: center !important;
	}
}

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com
camilllebrown
Tourist
4 0 1

Thanks a ton @LitExtension ! This fixed it!