Removing Padding from Header & Increasing space between menu items

Store Design
1

Using motion theme

How can I remove padding on either side of my header? I have removed ‘auto’ from the below but it drags my cart and icons further left

.page-width {
max-width: $page-width;
margin: 0 auto;
}

I am also looking to increase the distance between my top header menu items?

Theme: Motion

1 Like
2

Hello There,
Please share your store URL and and password.
So that I will check and let you know the exact solution here.

3

https://imperawear.com/

thank you!!

1 Like
4

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:
.template-index .header-wrapper header.site-header {
padding-top: 20px;
padding-bottom: 20px;
}

.template-index .header-wrapper header.site-header ul.site-navigation li.site-nav__item {
padding: 0 15px;
}
5

Amazing, that worked for increasing the space between menu items on the home page - how can I make this occur on every page?

And this section of code decreased the space above and below the header, not left and right of it?

Thank you so much for your help!!!

6

@ghimp

In this case you’d just need to remove the home page selector. It would look something like this:

.site-header {
padding-top: 20px;
padding-bottom: 20px;
}

.site-header .site-nav__item {
padding: 0 15px;
}

You can also adjust the values as per your wish:

20px = header top spacing
15px = left/right padding of menu items

Kind regards,
Diego

7

https://imperawear.com/

is my URL :slightly_smiling_face:

8

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:
.template-index .header-wrapper header.site-header {
padding-top: 0;
padding-bottom: 0;
}
9

Hi Diego,

I am happy with the padding at the top and bottom of the header and have fixed the navigation/menu items. However it is the padding to the LEFT & RIGHT of the header that I am looking to remove.

It looks to be on ‘auto’ and whenever the window is opened on a bigger screen the header logo and cart items do not remain close to the edge of the page but have a large amount of padding on the left and right, if you know what I mean?

1 Like