How can I increase spacing between menu items on the Dawn theme?

Store Design

Topic summary

Users are seeking to increase spacing between header menu items in Shopify themes, primarily Dawn but also Studio and Turbo.

Primary Solution (Dawn theme):

  • Add CSS code to base.css or theme.css via Online Store → Themes → Edit Code
  • Use .header__menu-item selector with padding adjustments (e.g., padding: 3rem 20px)
  • Include last-child selector to remove extra spacing from the final menu item
  • Media queries can target specific screen sizes (e.g., @media (min-width:1366px))

Key Technical Details:

  • The 1rem unit typically equals 10-16 pixels depending on theme settings
  • Users successfully adapted the code by adjusting rem values and adding left-padding sections
  • Screenshots were shared showing bunched menu items and CSS modifications

Theme-Specific Challenges:

  • Turbo theme users noted they only have theme.liquid file, not separate CSS files, requiring alternative approaches
  • Studio theme compatibility was questioned but not fully resolved in the thread

The discussion remains partially open, with some users awaiting store preview links for personalized troubleshooting.

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

My header menu is bunched up, how can I put larger spaces between each item? Using dawn theme, here’s my site:
https://bladelighter.com/pages/696969

1 Like
2

Hi @jackrivers .

I am Richard Nguyen from PageFly - Advanced Page Builder.

You can go to Onlinestore=>themes=> action=> edit code and add this code on file vendor.css

.list-menu--inline{
  padding: 3px 20px !important;
}

Hope this helps.

Best regards,

Richard - PageFly

3

The menu links looks good to me but if you still want to increase the spacing you can do this.

@media (min-width:1366px){
.header__menu-item{
padding-right:3rem;
}

.header__menu-item:last-child{
padding-right: 0;
}
}

Add this to the bottom of your css file, it’ll have a name either theme.css or base.css

1 Like
4

Great! That fixed it thanks. Out of curiousity, what’s last-child?

5

Great! And the last-child will be the last menu link you have. I used it to remove extra spacing from the last menu link.

6

@lunaworks thanks for provising this solution!

Unfortunately I cannot seem to increase the spacing between menu items still … they are just too close together.

Can you provide another solution for Studio theme?
Screenshot 2024-04-14 155939.png

7

Can you send a preview link to your store so I check it out for you?

8

Hi, I know this is an old thread but I just came across this when looking for help for a similar issue I was having. I don’t have any developing knowledge but I used your CSS code and changed it a bit to also increase the gap between my menu items. Just to double check if I’ve done the correct changes do you mind checking if the CSS code below is ok?

Screenshot 2024-07-30 114339.jpg
Screenshot 2024-07-30 114339.jpg236×220 9.92 KB

I basically copied the “padding-right” section and added a “padding-left” section and changed the “0rem” to “1rem” because I figured that this must be determining the gaps. Again, this is just by assumption asI have no developing knowledge… Please let me know if I did anything wrong if you have time.

Edit: forgot to add that I am using the Sitar theme

9

Hey there, yes your css looks fine to me, and you’re correct the 1rem which depending on your theme will either be 10pixels or 16pixels is what is being used to adjust the spacing.

If it doesnt work out lemme know :smiling_face_with_sunglasses:

10

Hi Lunaworks,

Preview

Those are great suggestions; I was keen to try them. Unfortunately I don’t have a theme.css or base.css, only theme.liquid. My theme is Turbo (Out of the Sandbox). I would really appreciate it if you could give me a hand.
Thanks in advance.