Mobile Nav Menu Issues (Debut Theme)

Solved
IKMStrategy
Tourist
3 0 1

Hi Everyone,

 

I was wondering if I can get some help with the mobile nav wrapper and header help.

 

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

Capture.JPG

 

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

 

1. The logo currently is white with a transparent background, same with the cart icon.

I've set .site-header__mobile-nav background colour to transparent in order to allow the hero image to be the background. However, this is causing issues in the mobile mode as you can see it has nothing in the back hence its white and you can't see the logo and the shopping cart icon. Is there a way that I can add an extra header section with a background colour of blue or something just for mobile mode and set a negative margin for it so the header section will go and act as the background??

 

2. The menu upon opening is not translating far enough.

As shown in the highlighted line in console, its only translating 274px, when really I need to to translate 450px to show the remaining two items on the menu.  I was trying to find where to edit the code, but I couldn't find it in theme.scss.liquid. Any guidance would be appreciated

Thanks in advance!

0 Likes
rsdimitrov
Shopify Partner
87 8 25

Hi @IKMStrategy 

 

1. Would you mind sharing a link to the store so I can see the code in action?
This would greatly easy the prototyping of solutions.

 

2. Is this a custom theme or you are customizing an existing theme?

I help family-run Shopify stores increase sales from existing traffic Learn More
Problem Solved? ✅ Accept the solution so you can help others.
Confused? Busy? Let me solve it for you: rumen@rumendimitrov.com
Did my answer save you time? Buy me a coffee, please ☕ :) paypal.me/rsdimitrov
IKMStrategy
Tourist
3 0 1

Hi Rsdimitrov,

 

I just sent you a PM with the website. 

 

Let me know what you think.

 

Thanks!

0 Likes
rsdimitrov
Shopify Partner
87 8 25

This is an accepted solution.

Hi @IKMStrategy 

Thanks for the store URL.

 

Replying here so that others having the same issue could benefit from the solution.

 

I expect this is what you want your menu to look like, right:

Screenshot 2020-03-28 at 15.56.21.png

 

I achieved that with the following changes

1. CSS changes

1.1. Open assets/theme.scss.liquid

1.2. Search for

.mobile-nav-wrapper {

Screenshot 2020-03-28 at 16.11.28.png

Change the z-index to 2,

comment out top and transform/translate lines.

I'm not showing them into the CSS, as I don't have access to the Theme.liquid that you are seeing. 

1.3. Save reload the page. You should now have only the properties with the checkmark available when you select the .mobile-nav-wrapper from the Chrome Inspector.

 

2. Javascript Changes

The movement of the navigation happens with the help of javascript. First, opening the nav pushes down the whole page, that's why you get white background on your header. Second it pushes the nav wrapper down to reveal it on screen.

 

To fix the latter change 'translateHeaderHeight' in assets/theme.js.liquid (line 1253 on the screenshot) to 0. This will make the nav show up exactly below the header.

Screenshot 2020-03-28 at 16.10.01.png

Next, comment out line 1256 to 1259. That code pushes down the whole page content based on the height of the mobile navigation container.

 

3. Save your files, reload the page

You should get a result looking like this:

ezgif-4-119ca6da8c2b.gif

 

Let me know if you face any difficulties applying the changes or you get results different from the ones I pictured.

 

Cheers,

Rumen

 

 

I help family-run Shopify stores increase sales from existing traffic Learn More
Problem Solved? ✅ Accept the solution so you can help others.
Confused? Busy? Let me solve it for you: rumen@rumendimitrov.com
Did my answer save you time? Buy me a coffee, please ☕ :) paypal.me/rsdimitrov
IKMStrategy
Tourist
3 0 1

Thank you so much man, You're a legend. Yeah I did all of that it worked just as you expected. I didn't realise the menu popping out was a javascript, that should've been obvious. 

rsdimitrov
Shopify Partner
87 8 25

@IKMStrategy , I'm happy that helped!

Good luck with your store! :)

I help family-run Shopify stores increase sales from existing traffic Learn More
Problem Solved? ✅ Accept the solution so you can help others.
Confused? Busy? Let me solve it for you: rumen@rumendimitrov.com
Did my answer save you time? Buy me a coffee, please ☕ :) paypal.me/rsdimitrov
YellowBarn
New Member
3 0 0

You have seemed to be a great help on this! I am having the same problem but this solution doesn't seem to be resolving it for me. I may be just doing things wrong!!!

 

Any chance you could help? The site is live and this is causing a big problem for customers.

0 Likes
rsdimitrov
Shopify Partner
87 8 25

Yes, @YellowBarn.

Create a new topic describing your issue and your store URL.

The reason for that is so people who have your specific issue have a place to find a solution or hope for a solution, like you did.


Send me a DM with a link to the post and I'll have a look

 

Cheers,

Rumen

I help family-run Shopify stores increase sales from existing traffic Learn More
Problem Solved? ✅ Accept the solution so you can help others.
Confused? Busy? Let me solve it for you: rumen@rumendimitrov.com
Did my answer save you time? Buy me a coffee, please ☕ :) paypal.me/rsdimitrov
0 Likes
Sam139
New Member
1 0 0
Nice It's awesome
0 Likes
Binxieee
Excursionist
60 0 12

@rsdimitrov sorry to bring this up again!

i have done this but the menu is now behind my slideshow on mobile.

is there a way to fix this?

0 Likes