How can I adjust the padding around my header icons for better positioning?

English Shopify Shopify Design
,
1

Screenshot 2024-02-13 110316.png
Screenshot 2024-02-13 110316.png476×777 398 KB

Hi, I wanted to make the padding around all my header icons smaller. I’m hoping this helps move the logo back to the centre, makes the header shorter, decreases space between cart and search and finally moves the icons further to the left or right on their respective sides. I hope changing the padding helps with these, I do have code to shrink the items but it doesn’t affect padding. please correct me if I’m wrong and thanks

1 Like
2

Share your store url

3

Hey @Stagtis

Please add the below css code to your “base.css” file.

@media screen and (max-width:749px){ 
.header {
    padding: 2px 1rem 2px 1rem;
}
.header__icon--search span{
  justify-content: end;
}
}

Thanks.

4

Hi @Stagtis ,

You can apply the Below code in base.css

.@media screen and (max-width:749px){ 

.header {
    padding: 2px 1rem 2px 1rem;
}
.header__icons {
    padding-left: 0.8rem;
    padding-right: 0;
}
.header__icon, .header__icon--cart .icon {
    height: 4.4rem;
    width: 4rem;
    padding: 0;
}
}
5

www.stagtis.com

6

hi, thanks for your reply but it didn’t work unfortunately even after messing with values.

7

Hi @Stagtis

This is Theodore from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Theodore | PageFly

8

Hi unfortunately, this didn’t work either, thank you though