To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

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

Solved
Anastasiia_K
Tourist
13 0 1

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 

Accepted Solution (1)

Accepted Solutions
WoodyDev
Shopify Partner
578 115 180

This is an accepted solution.

@Anastasiia_K 

 

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

 

example2.png

 

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;'

Woody, 29, Stafford, UK | If I helped you out, mark it as the solution and drop me a thumbs up! | This is just a hobby for me, not my full-time job, so tips are greatly appreciated! paypal.me/woodybruh | Developer for AimShop.com | Owner of WoodyDevelopments | Try the best Shopify page builder

View solution in original post

Replies 15 (15)
WoodyDev
Shopify Partner
578 115 180

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

 

example.png

Woody, 29, Stafford, UK | If I helped you out, mark it as the solution and drop me a thumbs up! | This is just a hobby for me, not my full-time job, so tips are greatly appreciated! paypal.me/woodybruh | Developer for AimShop.com | Owner of WoodyDevelopments | Try the best Shopify page builder
Anastasiia_K
Tourist
13 0 1

Sorry for the misspelling, it's bentoli.nl

bentriviani
New Member
2 0 0

@Anastasiia_K wrote:

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

director
https://classic-slots.pt/games-categories/halloween
WoodyDev
Shopify Partner
578 115 180

This is an accepted solution.

@Anastasiia_K 

 

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

 

example2.png

 

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;'

Woody, 29, Stafford, UK | If I helped you out, mark it as the solution and drop me a thumbs up! | This is just a hobby for me, not my full-time job, so tips are greatly appreciated! paypal.me/woodybruh | Developer for AimShop.com | Owner of WoodyDevelopments | Try the best Shopify page builder
DipenPanchal
Shopify Partner
244 59 73

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: DipenPanchal_0-1656336779568.png

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

Shopify Partner | Skype : dipen.setubridge
Anastasiia_K
Tourist
13 0 1

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
Shopify Partner
578 115 180

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.

Woody, 29, Stafford, UK | If I helped you out, mark it as the solution and drop me a thumbs up! | This is just a hobby for me, not my full-time job, so tips are greatly appreciated! paypal.me/woodybruh | Developer for AimShop.com | Owner of WoodyDevelopments | Try the best Shopify page builder
WoodyDev
Shopify Partner
578 115 180
@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

Woody, 29, Stafford, UK | If I helped you out, mark it as the solution and drop me a thumbs up! | This is just a hobby for me, not my full-time job, so tips are greatly appreciated! paypal.me/woodybruh | Developer for AimShop.com | Owner of WoodyDevelopments | Try the best Shopify page builder
Anastasiia_K
Tourist
13 0 1

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
Shopify Partner
578 115 180

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?

Woody, 29, Stafford, UK | If I helped you out, mark it as the solution and drop me a thumbs up! | This is just a hobby for me, not my full-time job, so tips are greatly appreciated! paypal.me/woodybruh | Developer for AimShop.com | Owner of WoodyDevelopments | Try the best Shopify page builder
Anastasiia_K
Tourist
13 0 1

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
Shopify Partner
578 115 180

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.

Woody, 29, Stafford, UK | If I helped you out, mark it as the solution and drop me a thumbs up! | This is just a hobby for me, not my full-time job, so tips are greatly appreciated! paypal.me/woodybruh | Developer for AimShop.com | Owner of WoodyDevelopments | Try the best Shopify page builder
Anastasiia_K
Tourist
13 0 1

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
Shopify Partner
578 115 180

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.

Woody, 29, Stafford, UK | If I helped you out, mark it as the solution and drop me a thumbs up! | This is just a hobby for me, not my full-time job, so tips are greatly appreciated! paypal.me/woodybruh | Developer for AimShop.com | Owner of WoodyDevelopments | Try the best Shopify page builder
Anastasiia_K
Tourist
13 0 1

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?