Hello Experts,
I made the menu sticky/Fixed. but the page content gets hidden behind the menu on page load.
How can this be fixed across all the page?
The website is https://www.athreyaherbs.com/
Thank you for your help.
Topic summary
Sticky header causes page content to load hidden behind the menu. The goal is a fixed header that doesn’t overlap content.
-
Proposed fix: Add CSS in styles.scss to make the header sticky with an offset: position: sticky; top: 0; background: white. Suggestion included duplicating the theme before edits and contacting the theme developer for purchased themes.
-
Implementation (original site): Target div#shopify-section-header-new with the above CSS. Result: worked for the original poster.
-
Theme-specific adjustment: For OOTSB Turbo, the initial selector didn’t work. A different section ID was used: div#shopify-section-sections–14634054189111__header with z-index: 999 added. Result: worked.
-
Notes: position: sticky keeps the header fixed at the top while scrolling; z-index ensures it stays above page content.
-
New request: Move the shopping cart icon into the header row with menus without increasing header height. Screenshots were shared to illustrate desired layout.
-
Status: Requires custom code changes; guidance to be shared upon confirmation. No final code provided yet.
-
Outcome: Sticky header issue resolved; cart icon layout change remains open/ongoing.
Hey @mel30
hi there if you are facing any issue on a purchased theme I suggest try contacting theme developer about the issue. https://help.outofthesandbox.com/hc/en-us
or if you wanna fix it by yourself follow below steps
Open theme code editor
Before editing code make sure to duplicate the theme
Online stores> Themes> Edit Code
find the file called styles.scss
and paste this code to very bottom of the file
div#shopify-section-header-new {
position: sticky !important;
top: 0 !important;
background: white !important;
}
If you are unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.
Hopefully, it will help you. If yes then Please don’t forget to hit Like and Mark it as the solution!
@deepaksharma Thank you this worked
1 Like
I tried this for my shop (www.nootkas.com) and it didn’t work. I’m using OOTSB Turbo.
Any ideas?
@rob10k8 add this to your CSS
div#shopify-section-sections--14634054189111__header {
position: sticky !important;
top: 0 !important;
background: white !important;
z-index: 999;
}
file or theme file
Pefect! Thanks!
Any chance you know how to get the shoping cart icon in the header rather than above the header?
@rob10k8 Please share the screengrab of what you want to achieve
When I add the cart Icon using the check box, it makes the header larger (vertically), I would like to have it moved the section below with the menus.
In the image below, I’d like to have the cart icon added:
But not have as much white space when I click the checkbox:
@rob10k8 You will need to do changes to your code if you are familiar with it.
Let me know and Ill share what needs to be done.
Yes, that is what I would like to do.
I am familiar with making code changes, just not to the extent of making this change.