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

Store Design
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.