Shopify themes, liquid, logos, and UX
Hello, Page moving behind Sticky header when scrolling down. You can check the issue in the below link:
https://simple-cozy.com/?_ab=0&_fd=0&_sc=1
I'm using geo shipping bar as announcement bar.
I just want the header to stay at the top of the page when i scroll down.
Thank you.
Hi,
I just gone through your store. Header is not fixed?
there is no announcement bar .
Hello, please disregard the link, it is an old version, and check the screenshots. When I scroll down, see how the page scroll behind the sticky header.
Thank you.
This will make the whole header sticky, including the announcement bar.
#SearchDrawer { z-index:1001; } #shopify-section-header { position: fixed; z-index:1000; left:0; right:0; -webkit-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1); -moz-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1); -ms-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1); -o-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1); box-shadow:0px 2px 4px 0px rgba(0,0,0,.1); background-color: {{ settings.color_body_bg }}; } #PageContainer { padding-top: 80px; } @media screen and (max-width: 749px) { #PageContainer { padding-top: 70px; } }
function headerSize() { var $headerHeight = $('div#shopify-section-header').outerHeight(); $('#PageContainer').css('padding-top', $headerHeight); } $(window).on("load", headerSize); $(window).on("resize", $.debounce(500, headerSize));
Thank you.
I already added this code, the header is sticky but at the very top of the page. Also I dont want to have the announcement bar sticky.
Thank you.
@Jad79 ,
Your issue is solved or not?
Thank you for the great code!
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024