The logo is overlapping the header on all pages. Is there something wrong?
Topic summary
Mobile issue: the store’s logo overlaps the header on small screens across pages of www.detailking.nl.
Proposed fixes (CSS):
- Add to theme asset CSS (main.css/base.css/style.css/theme.css) for mobile (≤599px): set .header-wrapper { position: absolute; top: 45px; } and adjust .banner__box { padding-bottom: 0; margin-bottom: -30px; }.
- Alternatively, add in Theme settings > Custom CSS for mobile (≤749px): .header-wrapper { top: 40px !important; }.
Evidence: screenshot/images provided showing expected header spacing after changes.
Current status: After applying a fix, the home page is corrected, but collection pages still show overlap. The solution is only partially effective.
Open items/next steps: Likely need page-specific CSS targeting collection templates or extending media queries/selectors to apply on collection pages. No final resolution yet; further adjustments are required.
1 Like
Hi @Detailking
Check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
@media only screen and (max-width: 599px){
.header-wrapper {
position: absolute;
top: 45px;
}
.banner__box {
padding-bottom: 0 !important;
margin-bottom: -30px;
}
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Hi @Detailking
Please go to Online Store > Themes > Customize > Theme settings > Custom CSS, add this code and save
@media (max-width: 749px) {
.header-wrapper { top: 40px !important; }
}
Thanks for your answer! It worked on the home page, but when you look at a collection, it’s still overlapping.