Solved

menu icons

Stagtis
Explorer
65 0 13

Hi, I would like to get some advice or code if possible. I upped the heading font scale size for readability, however, this pushed my logo from the centre on mobile. Is there a way to keep the size of the menu, search and cart icons but reduce their padding or something to get them to move further to the left and right so that the lgo has space to be centred again? Thank you so much. website: www.stagtis.com

 

 

Screenshot 2024-04-06 152038.png

Accepted Solution (1)

PageFly-Amelia
Shopify Partner
346 105 149

This is an accepted solution.

Hello @Stagtis ,

This is Amelia at PageFly - Shopify Advanced Page Builder app.

 

Step 1: Online Store -> Themes -> Edit Code

Step 2: Choose file theme.liquid

Step 3: Add code above the tag </head>

 

<style>
@media (max-width: 767px) {
 .header {
    padding: 0px 0px 0px 3rem !important;
 }
 .header header-drawer {
    margin-left: -3rem !important;
    padding-right: 3rem !important;
 }
}
</style>

 

 

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

View solution in original post

Replies 6 (6)

PageFly-Amelia
Shopify Partner
346 105 149

This is an accepted solution.

Hello @Stagtis ,

This is Amelia at PageFly - Shopify Advanced Page Builder app.

 

Step 1: Online Store -> Themes -> Edit Code

Step 2: Choose file theme.liquid

Step 3: Add code above the tag </head>

 

<style>
@media (max-width: 767px) {
 .header {
    padding: 0px 0px 0px 3rem !important;
 }
 .header header-drawer {
    margin-left: -3rem !important;
    padding-right: 3rem !important;
 }
}
</style>

 

 

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

Stagtis
Explorer
65 0 13

hi @PageFly-Amelia , this worked great thanks so much. I just moved the drawer to the right by 1 rem to taste. how could I move the cart to the left by 1 rem to match while keeping the search where it is?

PageFly-Amelia
Shopify Partner
346 105 149

Hello @Stagtis 

 

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Store -> Themes -> Edit Code

Step 2: Choose file theme.liquid

Step 3: Add code above the tag </head>

<style>
@media (max-width: 767px) {
 .header {
    padding: 0px 0px 0px 3rem !important;
 }
 .header header-drawer {
    margin-left: -3rem !important;
    padding-right: 3rem !important;
 }
 .header .header__icon--cart {
    margin-left: -1rem !important;
 }
 
}
</style>

 

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

Stagtis
Explorer
65 0 13

thank you

deepaksharma
Shopify Partner
448 63 95

Hi there @Stagtis 

 

try this code 

.header {
    padding: 0 1rem;
    display: flex;
    flex-direction: row;
    gap: 2rem;
    justify-content: space-between;
}

 

paste this code in base.css to very bottom.

 

If you are unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

 

Hopefully, it will help you. If yes then Please don't forget to hit Like and Mark it as the solution!

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
Stagtis
Explorer
65 0 13

hi, thanks but this only shrunk my logo