Hello,
The top of my pages are being cut off by the header. It’s happening on almost all of my pages, as well as the shopping cart.
Topic summary
A Shopify store owner is experiencing an issue where the header overlaps and cuts off content at the top of multiple pages, including the shopping cart. Screenshots show the header covering page content.
Solution provided:
- Add custom CSS to create top margin for the main content area
- Navigate to: Shopify Admin → Online Store → Themes → Actions → Edit code
- Open the CSS file in the Assets folder (base.css, style.css, or theme.css)
- Add the following code at the bottom:
#mainContent {
margin-top: 112px;
}
Outcome:
The CSS fix successfully resolved the issue by adding spacing between the header and page content, preventing the overlap. The store owner confirmed the solution worked.
Hi @JenaPatel
Would you mind to share your Store URL website? with password if its unpublish. Thanks!
Thank you!
1 Like
Thanks for the info, it seems like your aiming something for the banner image. That affect other pages. Do you like to make the header transparent? i just add the margin so it wont be cut.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
main#MainContent {
margin-top: 112px;
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like
That worked thank you so much!