Icons distance on herader dawn theme 10.0

Store Design

Topic summary

A user added social media icons to the Dawn theme 10.0 header but noticed inconsistent spacing between the cart icon and Facebook icon compared to other icons.

Proposed Solutions:
Multiple respondents suggested adding CSS code to the base.css file in the Assets folder:

  • Basic fix: Add padding-left: 1.3rem; to .header-list-social.list-unstyled.list-social selector
  • Enhanced solution: Include both padding-left: 1.3rem; and flex-wrap: nowrap; properties

The flex-wrap: nowrap property prevents social icons from wrapping into a column when the browser is resized.

Implementation steps:

  1. Navigate to Online Store > Themes > Actions > Edit code
  2. Open the base.css file in the Assets folder
  3. Add the CSS code at the bottom of the file
  4. Save changes

A reference image was provided showing the expected result. The discussion appears resolved with consistent technical guidance from multiple contributors.

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

I added social media icons to header in dawn theme 10.0, desktop version, but how can I make the distance between cart and facebook the same as the other icons?

website https://blessedfashion1.myshopify.com/

password fashion

pic for reference https://ibb.co/FYTmDvb

Thanks for your help.

1 Like
2

@urbantis , hope you are doing well

please add the below line of CSS code at the end of your base.css file.

body .list-social{
padding-left:1.3rem;
}
3

Hi @urbantis ,

Try this.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
ul.header-list-socail.list-unstyled.list-social {
    padding-left: 1.3rem;
}

Result:

Ribe_Dagandara_0-1688927966204.png
Ribe_Dagandara_0-1688927966204.png403Ă—197 10.6 KB

I hope it help.

4

Hello,

Go to Online store > find your theme. On the 3 dots click Edit code.

In the assets folder open base.css file.

Go to the bottom and paste this code:

(As other answers add the padding-left but also the flex-wrap)

ul.header-list-socail.list-unstyled.list-social {
  padding-left: 1.3rem;
  flex-wrap: nowrap;
}

The flex-wrap property will prevent the social icons to display in a column as you resize your browser.

Hope this helps