How do I make my header icons be closer together? See pictures please

Store Design
, , , ,

Topic summary

A user seeks to reduce spacing between header icons in their Shopify store, providing before/after images showing the desired closer arrangement.

Solutions Provided:

Two community members offered CSS-based fixes:

  • Anthony_David_1’s approach: Add code to base.css targeting .header__icon, .header__icon.account--icon, and .list-social__link with specific width and padding adjustments

  • PageFly-Victor’s approach: Similar method using base.css, focusing on .header__icons, .header__icons .list-social__link, and account icon selectors with margin and width modifications using !important flags

Implementation Steps:

  1. Navigate to Online Store > Themes > Actions > Edit Code
  2. Locate and open base.css file
  3. Paste provided CSS code at the end of the file
  4. Save changes

Both solutions modify padding, margins, and widths of header icon elements. The discussion remains open pending confirmation from the original poster on whether either solution resolved the spacing issue.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

MYICONS.PNG

MYICONS2.PNG

Hello, above are my icons, they are too spaced out. I want them to be closer together like the example on the right. Can anyone help me do this? I’ll accept you as solution today. Thank you!

Store: https://black-bee-1.myshopify.com/

Password: giaske

2

hi @kirstenlc5

Follow the below step:

Online Store > Themes > Actions > Edit Code > On left search base.css > open the file and at the end of the file add the below code.

.list-social__link {
    padding: 1.3rem 0.5rem;
}
.header__icon {
    width: 3.5rem;
}
a.header__icon.header__icon--account.link.focus-inset.small-hide {
    width: fit-content;
    padding-left: 8px;
}

Hope this works.

Thanks

3

Hi [email removed]Kirstenlc5,

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css.

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

.header__icons{
align-items: center !important;
}

.header__icons .list-social__link{padding:6px !important}

a.header__icon.header__icon–account.link.focus-inset.small-hide[href=“/account/login”]{

width:2.4rem !important;

margin-right:-.5rem !important

}

PageFlyVictor_0-1672286165077.png
PageFlyVictor_0-1672286165077.png1518×578 95.5 KB

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly