Move the logo to the left side in hamburger menu on Dawn theme

[Anastasiia_K]

Hi guys,

My question is related to the header in mobile and tablet views of my website built with the Dawn theme, The final goal is to remove the hamburger menu icon completely and move the logo all the way to the left side by basically replacing it. I was able to remove both the hamburger icon and its functionality completely in the code but somehow I am now unable to move the logo to the left by setting up its position. The only way I can move it is by moving it up and down. Maybe someone knows how to move it to the left side?

The website is bentoli.nl

Password: ahghia

[WoodyDev]

The logo is already left aligned but the hamburger menu is still there, unsure what you’re trying to achieve?

[Anastasiia_K]

Sorry for the misspelling, it’s bentoli.nl

[bentriviani]

@Anastasiia_K

Hi guys,

My question is related to the header in mobile and tablet views of my website built with the Dawn theme, The final goal is to remove the hamburger menu icon completely and move the logo all the way to the left side by basically replacing it. I was able to remove both the hamburger icon and its functionality completely in the code but somehow I am now unable to move the logo to the left by setting up its position. The only way I can move it is by moving it up and down. Maybe someone knows how to move it to the left side?

The website is bentoli.nl

Password: ahghia

As for me, you have no problem

[WoodyDev]

@Anastasiia_K

No problem, see below to see if this is the desired result:

If so, you will need to go to your ‘base.css’ file and search for the following:

.header__heading, .header__heading-link {
    grid-area: heading;
    justify-self: center;
}

Change where it says ‘grid-area: heading;’ to ‘grid-area: inherit;’

[SetuBridge_1]

Hello @Anastasiia_K ,

Greetings!!

Go to Online Store → Edit Code → Assets → base.css and paste this at the bottom of the file:

.header-wrapper header.header {
    display: grid;
    grid-template-areas: 'heading icons';
    grid-template-columns: auto;
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    justify-content: space-between;
}

I hope It will work for you
Output:

[Anastasiia_K]

Wonderful! It did work, thank you very much!

Might you also know how I can hide all the other elements of the header like search and cart?

[WoodyDev]

I shall take a look into it for you now.

Don’t add the extra code to the bottom of your page, it caused confusion whenever someone does future development as there is already and existing ruleset within the code.

[WoodyDev]

@media only screen and (max-device-width: 768px) {
 .header__icons {
      display: none;
  }
}

You can add this in to the bottom of your base.css file to remove the other icons

[Anastasiia_K]

It also works perfectly, thank you! I am so sorry to ask you yet again but I am currently trying out different solutions and I was wondering if there’s any way I could replace the hamburger menu icon with a login button, for example? I was just expecting that the end result with a logo on the left would look a bit different so I am trying to think how to get it done better:)

[WoodyDev]

You’re very welcome!

So you want the logo on the left and a login button on the right where the old search/cart icons were?

[Anastasiia_K]

If that’s possible, I would like the logo to stay in the center and replace the left side (where the hamburger menu button used to be) with a login button whilst keeping the search and cart buttons as they are right now

[WoodyDev]

Okay!

Could you send me your STORE.myshopify.com link and I will send a collaborator request, will be easier for me to work on than inspecting element.

[Anastasiia_K]

I asked a person to whom I am helping out with a website and, unfortunately, I was not permitted to do so. If you could suggest to me what I can do here, it would really help me a lot. I will do my best to implement it just as you describe it:)

[WoodyDev]

I would need to do a lot of code rearranging and testing to shuffle things around and it’s near impossible for me to do that from just inspecting element.

If I request collaborator access my permissions will be limited to the ‘Theme’ section and ‘pages’ section only and nothing will be changed on the live theme, I will make a copy and make sure the changes work prior to pushing it live.

[Anastasiia_K]

Let’s stick to the initial solution then, thanks for your willingness to help:) Now though, when I switched back to the very first solution, my search button moved up and it’s no longer aligned with the other buttons. What could have caused such a problem?

[NeginA]

Hi!

Can you help me with Shopify Charger theme? I need to put the hamburger menu on the left on mobile only (undigabledigs.com)