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

Store Design
,

Topic summary

Goal: reduce padding around header icons to re-center the logo, shorten the header, narrow space between cart and search, and shift icons toward their sides.

Key steps taken:

  • Store URL shared: www.stagtis.com.
  • CSS proposed for mobile (max-width: 749px) in base.css: decrease .header padding; adjust .header__icon–search span alignment.
  • Alternative CSS in base.css: modify .header padding; tweak header icon padding; set icon height/width and zero padding.
  • Suggestion to add code in theme.liquid above (no specific code content provided).

Outcome:

  • Reporter states the provided CSS changes did not work, even after adjusting values.

Status:

  • Unresolved/ongoing. No confirmed fix or actionable selector changes identified.

Notes:

  • Solutions focused on mobile breakpoint and theme-specific classes (base.css, theme.liquid, .header, .header__icon). Precise selectors and placement that successfully affect the store’s theme remain undetermined in the discussion.
Summarized with AI on January 5. AI used: gpt-5.
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