logo positioning for mobile

[Ecomowner]

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

[Small_Task_Help]

Hi,

Hope this will help

- Rearrange Logo HTML

You’ll see something like this in the code:

{% 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>

Move logo <div> above the hamburger menu <div>.

- Use css for style

[Ecomowner]

Can you tell me what section this would go in.

[LitExtension]

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.