How to change logo position on mobile view?

[Apeya]

Recently I decided to remake header interface for my website mobile view. I found codes to move hamburger and cart icons, but couldn't find one for logo(

Right now my logo is positioned in the center, but I really want to move it to the left corner.

Theme: Dawn

Website name: apeya.co

Hope someone can help me!

Thanks

[TheUntechnickle]

Hi @Apeya,

Your store seems password protected. Can you please share the store-front password so that we can fix this in a jiffy?

Thanks,
Shubham | Untechnickle

[Apeya]

Oh excuse me, the password is removed now.

Please check it once more

[TheUntechnickle]

It's accessible now. However, can you please clarify what exactly are you trying to achieve here?

I see the hamburger on the left and logo in the centre. You want to move the logo to the left, and hamburger to the centre? Let me know 🙂

[Apeya]

I would love to know how to move my logo to the left corner, please!

Thanks, but there is no need to move other header icons, because I already know how to do it)

[TheUntechnickle]

Here's a quick and easy way to move your logo to the left corner of your theme's header using a CSS Grid layout:

@media screen and (max-width: 750px) {
  .header.header--middle-left.header--mobile-center {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas: "logo menu icons" !important;
  }

  .header__heading {
    grid-area: logo !important;
    text-align: left !important;
    justify-self: start !important;
  }

  header-drawer {
    grid-area: menu !important;
    justify-self: center !important;
  }

  .header__icons {
    grid-area: icons !important;
    justify-self: end !important;
  }
}

What this does:

• It creates a simple grid layout with three columns for the header on mobile devices.
  • The logo is aligned to the left.
  • The menu button stays centered.
  • The icons remain on the right.
• The !important ensures the styles work, even if your theme has overriding styles.

Let me know if you need any other help. Happy to guide you! 😊

Shubham | Untechnickle

[Apeya]

It does work but only for a home page(

That's how logo appears on other pages:

https://drive.google.com/file/d/1O5usFl97m18awL8hx4kpYWpTRcOYv_fS/view?usp=sharing

Can we alter it?

Thanks