Logo alignment and navigation menu issues in mobile view

[Theoclarke]

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).

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).

Please advise as to how I can resolve this issue, any advice would be much appreciated. Thank you

Kind regards

Theo

[Vikas_Chovatiya]

Hi @Theoclarke 

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

[Theoclarke]

Hi @Vikas_Chovatiya 

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

[Vikas_Chovatiya · 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;
	}
}

[Theoclarke]

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

[Vikas_Chovatiya]

Hi @Theoclarke 

Please replace this CSS

.mobile-nav-wrapper {
    z-index: 999999;
    top: 50px;
}

[Theoclarke · 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

[Vikas_Chovatiya · 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;
	}
}

[Theoclarke]

Hi @Vikas_Chovatiya 

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

Theo