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.
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!
Solved! Go to the solution
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?
This is an accepted solution.
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:
I achieved that with the following changes
1. CSS changes
1.1. Open assets/theme.scss.liquid
1.2. Search for
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.
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.
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:
Let me know if you face any difficulties applying the changes or you get results different from the ones I pictured.
@IKMStrategy , I'm happy that helped!
Good luck with your store! :)
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