Align icons in the header

Store Design
, ,
1

IMG_2670.jpeg
IMG_2670.jpeg1170×505 30.9 KB

Hello guys, I put a code to paste the menu on the left side on the home page but I saw that later when I go to the product page it changes the arrangement as it is in the image below, I wanted to align as it is on the home page without removing the menu on the left side

I use refresh theme

https://www.behumblee.com/

Pass-Humblee3030

Thanks a lot :heart:

2

Hi @Suco ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css, theme.css or styles.css

Step 3: Insert the below code at the bottom of the file → Save

@media (max-width: 988px) { 
   .header .header__heading-link {
      margin-right: auto !important;
   }
}

Here is result:

BSSTechVenture_0-1716253841713.png
BSSTechVenture_0-1716253841713.png486×806 94.1 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

3

Hello @Suco

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media only screen and (max-width: 989px) { .header--mobile-left .header__heading-link{ margin-right: auto !important; } }

techlyser_web_0-1716261837451.png
techlyser_web_0-1716261837451.png323×314 44.8 KB

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

4

Hello @Suco ,

Need to add code into base.css file

@media(max-width:768px){
    .header.header--top-left header-drawer{
        flex: 1 1 50%;
    }
    .header.header--top-left .menu-drawer-container{
        flex: 1 1 200%;
    }
}