remove padding under header section

Shopify Discussion
1

Screenshot 2025-06-11 204809.png
Screenshot 2025-06-11 204809.png508Ă—314 14.8 KB

i want to remove padding under header section

2

hey @shop22dash share the URLs of your website plz

3

Hi @shop22dash

let try to add this Custom CSS code :

.section-header .header {
  padding-block: 0;
}

BiDealDiscount_0-1749719482601.png
BiDealDiscount_0-1749719482601.png517Ă—897 201 KB

4

Hi @shop22dash !

To remove the padding under the header section on your Shopify store (as shown in your screenshot), you’ll need to adjust the CSS for your theme. Here’s how to do it:

Step-by-step to Remove Padding Under Header1. Go to your Shopify admin:

Online Store > Themes

  1. Click “Actions” > “Edit code” on your active theme.

  2. In the left sidebar, look for a CSS file, usually named one of the following:

    • base.css

    • theme.css

    • style.css

    • or inside assets/ folder

  3. Add this CSS at the very bottom of that file:

ViWizzCommerce_0-1749719828225.png
ViWizzCommerce_0-1749719828225.png989Ă—399 7.59 KB

/* Remove bottom padding under header */
header {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}

.header-wrapper, .site-header {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}

  1. Save the file.

Optional: Use the Shopify Theme Editor (Inspect Element)

If you’re not sure what the exact class is, you can also:

  • Open your store in Chrome.

  • Right-click the space under the header > “Inspect”.

  • Look at the highlighted section and find a class name like .header, .site-header, or .header-wrapper.

  • Use that exact class in your CSS override.

If this reply was useful to you, we would really appreciate it if you gave us a LIKE and mark the issue as SOLVED!

5

Hello @shop22dash ,

Can you please share store url and password if it is password protected.