Theme Venue : How to change the position of the logo for mobile design ?

Solved
Highlighted
Tourist
8 0 1

Hi,

I found on the shopify community how to put my logo on left side for the web view.
But, when I want to switch to mobile view, the burger menu is under the logo which is put on left by the code founded here.

Is it possible to add a code saying : "for mobile menu, put the logo on the center" ?

The code founded here was this one :
To put in the theme.scss.liquid
Code :

 

.primary-nav.header-navs__items.js-primary-nav{position: absolute ; margin-left: 20%; }
.header__logo{ right:80% ;}

 

This is OK for webview :
webviewwebview

 Not OK for Mobile view (burger menu is under the logo)

mobile viewmobile view

 

If we can ameliorate it to change it when we are on mobile device, should be great !
Thanks a lot !

0 Likes
Highlighted
Shopify Partner
2827 621 758

@Neocortex721 

Please share your website URL. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Highlighted
Shopify Partner
2827 621 758

@Neocortex721 

Mobile issues

1) Logo height problem.

2) Burger menu not showing or hiding behind the logo or icons.

So it needs to be logo in proper size with search, cart, and burger menu icons on the right.

 

Let me know if I skipped anything.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
8 0 1

@dmwwebartisan 

Mobile issues

1) Logo height problem. - Right : should be at the center of the page

2) Burger menu not showing or hiding behind the logo or icons. - Right : the burger menu is ON and not under the logo

So it needs to be logo in proper size with search, cart, and burger menu icons on the right. - The burger menu should on left / Logo at the center / Search and cart on the right part

Thx a lot

0 Likes
Highlighted
Shopify Partner
2827 621 758

@Neocortex721 

Please remove your code and I used your code with a media query for desktop only. Please put the following code and check.

@media screen and (min-width: 767px){
.primary-nav.header-navs__items.js-primary-nav{position: absolute ; margin-left: 20%; }
.header__logo{ right:80% ;}
}

 

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
1 Like
Highlighted
Tourist
8 0 1

@dmwwebartisan 
It works great !


For iPad format : it doesn't work

ipad-format.JPG

0 Likes
Highlighted
Tourist
8 0 1

@dmwwebartisan 

 

I just change the min-width to 1025px and it works for iPad Pro !

@media screen and (min-width: 1025px){
.primary-nav.header-navs__items.js-primary-nav{position: absolute ; margin-left: 20%; }
.header__logo{ right:80% ;}
}

 

I think your solution is the best !
Thx a lot 

0 Likes
Highlighted
Shopify Partner
2827 621 758

This is an accepted solution.

@Neocortex721 

LOL, you get it my way. Thanks for the compliment. If you are happy with my suggestion then please give a Like which boost my confidence and mark this post as a Solution so others can takes benefits.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
1 Like