logo positioning for mobile

Shopify Discussion
,
1

Does anyone know how to change the logo position for mobile so that the logo is on the top left above the hamburger menu.
this is my website: www.zenfactr.com

2

Hi,

Hope this will help

  • Rearrange Logo HTML

You’ll see something like this in the code:

{% comment %} Logo {% endcomment %}

{{ 'your logo code here' }}
{% comment %} Mobile menu icon {% endcomment %}

Move logo

above the hamburger menu
.

  • Use css for style
3

Can you tell me what section this would go in.

4

Hi @Ecomowner , you can follow these steps:

1. Go to header.liquid: Online Store > Themes > [Your Theme] > Edit Code > Sections > header.liquid

2. Find the lines that look like this (or similar):

{% comment %} Logo {% endcomment %}
<div class="site-header__logo">
{{ 'your logo code here' }}
</div>

{% comment %} Mobile menu icon {% endcomment %}
<div class="site-header__mobile-nav">
<!-- Hamburger menu code -->
</div>

3. Reorder them so the logo comes first (above the menu icon).

4. You may also need to add this to your theme CSS:

@media screen and (max-width: 749px) {
.site-header__logo {
order: -1;
width: 100%;
text-align: left;
}

.site-header__mobile-nav {
order: 0;
}

.header__inline-menu {
flex-direction: column;
}
}

Adjust class names if yours are different.

That’s all. If this solved your problem, please like and mark Solved.