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!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024