Hello I would like to get rid of the unnecessary padding in my header (shown by red lines). I have tried editing the css code which can be seen in the attached image. What else can be done?
Thank you.
Topic summary
Excessive top padding/space in the Shopify Impulse theme header; the store owner tried custom CSS but saw no change, sharing screenshots of the issue and code placement. CSS refers to styling rules, and !important forces those rules to override theme defaults; negative margin-top can visually pull elements upward.
Proposed fixes:
- Add margin-top: -20px with !important to header/.header to offset the extra space.
- In theme CSS, set .site-header-sticky { height: auto !important; } and .site-header { padding: 0 !important; }.
- Place custom CSS in theme.liquid near (guidance provided via screenshot), or in Assets > theme.css.
User feedback:
- Prior suggestions did not work; Impulse lacks theme.sccs.css, and adding code to theme.css.liquid or creating a new asset had no effect. The store URL was shared for inspection.
Most recent update:
- Targeted selectors suggested for Assets > Theme.css: div#StickyHeaderWrap { height: 100px !important; } and .header-layout.header-layout–left-center { height: 100px !important; }.
Status: No confirmed resolution yet; awaiting results from the latest CSS changes. Screenshots are central to understanding the spacing and code placement.
Hi @temzra It appears that there is an extra space appearing before your header. To resolve this, we can adjust the header selector, such as “header/.header,” to include a margin-top of -20px. To ensure that this overrides any existing CSS, add “!important” to the end. check my screenshot please
Hi @temzra
This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Go to Online Store->Theme->Edit code->theme.liquid->paste bellow code in tag
Please refer to this screenshot:
Hope you find my answer helpful!
Best regards,
Victor | PageFly
To reduce header padding follow this steps :
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset > theme.sccs.css and paste this at the bottom of the file:
.site-header-sticky{
height: auto !important;
}
.site-header{
padding: 0 !important;
}
Hope this works well.
Best Regards !
Hello, I tried what you said but your solution does not work, do you have any other suggestions?
Thank you
Hello, thank you for replying. I tried what you suggested but I am still facing the same issue when I preview my store. Can you please confirm I put the code in correctly. Thank you
Hello, Thank you replying.
The theme code does not actually have an asset called theme.sccs.css so I copied the code into theme.css liquid however, no change happned to my online store.
I also made a new asset called theme.sccs.css and this also had no affect.
Any other suggestions you have would be much appreciated.
Thank you
@temzra , You can send me the URL to this page?
Hi @temzra
This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Theme.css
div#StickyHeaderWrap {
height: 100px !important;
}
.header-layout.header-layout--left-center {
height: 100px !important;
}
Hope you find my answer helpful!
Best regards,
Victor | PageFly
1 Like