How can I move the menu button on my mobile header?

Solved

How can I move the menu button on my mobile header?

jasa11
Explorer
85 0 9

Hey,

 

Can anyone help me out with a code that will enable me to move the ''menu'' button around on my header. I recently made my header a bit bigger and now the menu button isn't properly placed. I'd like to move it a bit towards the left.

 

I attached a screenshot as well.

 

website url: jasaoslaj.com

 

And this only applies to mobile.

 

Thank you!

 

Screenshot_20230809_111451_Samsung Internet.jpg

 

Accepted Solution (1)

Artzen_tech
Shopify Partner
536 107 108

This is an accepted solution.

Hello @jasa11  

Its Artzen Technologies! We will be happy to help you today.

 

As, you can see in the below screenshot which is according to your current design, there is a padding of 25px on top_bar class. This padding is making the design look like this.

Artzen_tech_1-1691577466417.png



Now, I changed the css a bit and made that padding 10px, and now you can see the difference in below screenshot. 

Artzen_tech_0-1691577368974.png

Find the above CSS in the style.scss.css file and replace it with below mentioned CSS.

.top_bar.clearfix {
    height: 80px !important;
    padding: 10px !important;
}

This CSS will shift your menu a bit towards left according to your desire.


Let me know if need further assistance
Regards,
Artzen Technologies

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify

View solution in original post

Reply 1 (1)

Artzen_tech
Shopify Partner
536 107 108

This is an accepted solution.

Hello @jasa11  

Its Artzen Technologies! We will be happy to help you today.

 

As, you can see in the below screenshot which is according to your current design, there is a padding of 25px on top_bar class. This padding is making the design look like this.

Artzen_tech_1-1691577466417.png



Now, I changed the css a bit and made that padding 10px, and now you can see the difference in below screenshot. 

Artzen_tech_0-1691577368974.png

Find the above CSS in the style.scss.css file and replace it with below mentioned CSS.

.top_bar.clearfix {
    height: 80px !important;
    padding: 10px !important;
}

This CSS will shift your menu a bit towards left according to your desire.


Let me know if need further assistance
Regards,
Artzen Technologies

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify