How to add space or padding between items on the header menu?

Solved
suntisfypopfun
Excursionist
14 0 9

Hey friends,

 

I've been struggling when it comes to customizing the main Header menu on my front page. I would like to add space between the menu items so the header menu doesn't look so empty at its ends!

Poured through code for a few hours already but I feel like it's an exercise in futility. Any pointers for a rookie over here? I appreciate your time - Currently using the Out of the Sandbox Turbo theme if that's of any help! 

Thank you for your time.

Accepted Solution (1)

Accepted Solutions
Nick_Marketing
Shopify Partner
1367 314 399

This is an accepted solution.

If you want to add more spacing between the menu items, try adding this code at the very bottom of styles.scss file

.menu.align_right li{
  padding-left: 40px;
  padding-right: 0px;
}

.menu.align_left li{
  padding-right: 40px;
}

 

End result:

2021-07-15 15_19_51.png

 

I hope it answers the question!

Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).

View solution in original post

Replies 4 (4)
Nick_Marketing
Shopify Partner
1367 314 399

This is an accepted solution.

If you want to add more spacing between the menu items, try adding this code at the very bottom of styles.scss file

.menu.align_right li{
  padding-left: 40px;
  padding-right: 0px;
}

.menu.align_left li{
  padding-right: 40px;
}

 

End result:

2021-07-15 15_19_51.png

 

I hope it answers the question!

Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).
suntisfypopfun
Excursionist
14 0 9

You sir are a gentleman and a scholar. Thanks a ton - helped me out a ton! Have a wonderful day. 

Nick_Marketing
Shopify Partner
1367 314 399

Thank you! Should you will have any questions, feel free to PM me.

Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).
workingtimbers
New Member
1 0 0

What if your theme doesn't have the styles.css?