Logo alignment and navigation menu issues in mobile view

Solved
Theoclarke
Tourist
10 2 1
I am experiencing issues with my logo and navigation menu in mobile view.
My store logo on mobile does not adjust to the mobile screen size (samsung s9) instead the shopify menu is displayed below the screen. (Please see attached image)
However, on Iphone the logo adjusts and aligns alongside the menu (looks much better).
2020-09-10 logo & menu mobile issues.png
Secondly when using the shopify menu, the logo overlays the menu header and the back arrow so the user cannot navigate back. (Please see attached image 2).
2020-09-10 logo & menu mobile issues2.png
Please advise as to how I can resolve this issue, any advice would be much appreciated. Thank you
Kind regards
Theo
0 Likes
Vikas_Chovatiya
Navigator
339 79 99

Hi @Theoclarke 

Thanks Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Theoclarke
Tourist
10 2 1

Hi @Vikas_Chovatiya 

Thanks! here is my URL: https://bambiniandbo.co.uk/

0 Likes
Vikas_Chovatiya
Navigator
339 79 99

This is an accepted solution.

Hi @Theoclarke 

Thanks for the share URL.
1. Go to Online Store->Themes->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 375px){
	.site-header__icon{
		padding: 10px 5px;
	}
	.site-header .grid{
		width: 49%;
	}
	.mobile-nav-wrapper{
		z-index: 999;
		top: 40px;
	}
}
If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
Theoclarke
Tourist
10 2 1

Hi @Vikas_Chovatiya 

Amazing, thank you! This has resolved the issue on the Samsung S9! However there is still a problem with Samsung S8+ (see image attached)

Any advise for fixing this please? Thanks

Theo

2020-09-11 s9 & s8+.png

0 Likes
Vikas_Chovatiya
Navigator
339 79 99

Hi @Theoclarke 

Please replace this CSS

.mobile-nav-wrapper {
    z-index: 999999;
    top: 50px;
}
If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Theoclarke
Tourist
10 2 1

This is an accepted solution.

Hi @Vikas_Chovatiya 

Does not seem to have resolved - I have attached screenshot of mobile view and theme.scss.liquid.

is this correct? Thanks

I will donate on paypal for your help

Theo

 

2020-09-11 s8+ & iphone xs max.pngtheme.scss.liquid.png

0 Likes
Vikas_Chovatiya
Navigator
339 79 99

This is an accepted solution.

Hi @Theoclarke 
1. Go to Online Store->Themes->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 749px){
	.site-header__icon{
		padding: 10px 5px;
	}
	.site-header .grid{
		width: 49%;
	}
	.mobile-nav-wrapper{
		z-index: 99999;
		top: 50px;
	}
}

 

 

If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Theoclarke
Tourist
10 2 1

Hi @Vikas_Chovatiya 

Amazing, thank you! problem solved. I will donate through paypal now, I really appreciate your help.

Theo