How To Reduce Padding on Header Shopify?

Want to boost your Shopify sales quickly? TikTok Ads is one of the most effective ways to reach a global audience and drive instant traffic to your store. If you’re looking to make the most out of your TikTok marketing strategy, check out our step-by-step TikTok Ads tutorial! From setting up your account to launching your first ad campaign, we’ve got you covered. Get ready to see your sales soar with the power of TikTok Ads!

👉 TikTok Ads Tutorial 2025 for Beginners ⮕

Reducing the padding on your Shopify header involves editing the CSS in your theme. Here’s a step-by-step guide to adjust the header padding:

1. Access the Theme Code

1. Log in to your Shopify admin.
2. Go to Online Store > Themes.
3. Find your active theme and click Actions > Edit Code.

2. Locate the CSS File

1. In the code editor, go to the Assets folder.
2. Look for a file named theme.css, styles.css, or similar. Click to open it.

3. Identify the Header Class

You need to know the class or ID of the header to adjust its padding. Common header selectors are:

• .site-header
• header
• .main-header

If unsure, use your browser’s developer tools:

1. Right-click the header on your store and select Inspect (or Inspect Element).
2. Find the class or ID of the header in the HTML.

4. Add or Modify the CSS

In the CSS file:

1. Search for the header class or add it if it doesn’t exist.
2. Adjust the padding values.

Example:

You can also use shorthand:

5. Test Changes

1. Save the file.
2. Refresh your Shopify store to check the changes.
3. Adjust the values until the header looks as desired.

6. Use the Theme Editor (If Available)

Some Shopify themes allow you to customize header padding without editing code:

1. Go to Online Store > Themes > Customize.
2. Navigate to the Header section.
3. Look for padding or spacing settings and adjust them.

7. Mobile-Specific Adjustments (Optional)

If you want to reduce padding for mobile screens only, use a media query:

Summary

• Edit the theme.css or equivalent file to modify header padding.
• Use your browser’s developer tools to identify the header class.
• Test and refine the changes to ensure they work for both desktop and mobile views.

By following these steps, you can reduce header padding effectively and improve the design of your Shopify store.

👉 Get Shopify $1 for 3 Months ⮕