It’s exactly the problem I said in the title, I tried to fix the javascript but I’m not sure how to do it, which part should I fix? I’m using the Dawn theme.
Topic summary
A user encountered a visual gap appearing between the header menu and page content when scrolling down on their Shopify store using the Dawn theme.
Initial Troubleshooting:
- Another participant asked whether custom code was added to make the header sticky
- Suggested removing custom code and using the built-in sticky header option via: Store Admin > Sales Channels > Online Store > Themes > Customize > Header > Sticky Header
Solution Provided:
A third participant shared custom CSS code to be added to Assets/base.css, which included:
- Body overflow adjustments
- Z-index modifications for the header section
- Position and margin fixes for various elements
- Breadcrumb and announcement bar styling corrections
Resolution:
The original poster confirmed the CSS code successfully resolved the issue as intended.
Did you add customized code to make the header sticky?
Please remove your code and go to store admin > Sale channels > Online Store > Themes > Customize > Header > Header sticky
Hi @zenir_official ,
May I suggest to update code these steps:
- Go to Store Online-> theme → edit code
- Assets/base.css
- Add code below to end of file
body:not(.overflow-hidden) {
overflow: visible!important;
}
.section-header.shopify-section-group-header-group{
z-index: 100000!important;
position: -webkit-sticky;
position: sticky;
top: 0;
}
.shopify-section-group-header-group.announcement-bar-section {
z-index: initial!important;
}
#shopify-section-sections--22410486317355__header sticky-header {
position: static!important;
}
body #smi-template--22410490839339__smi_slideshow_1_2_PGVfnn{
margin-top: 0!important;
}
body .breadcrumbs {
top: 33px;
margin-bottom: 0;
}
1 Like
The code works as I had hoped. Thank you so much! 