-
ben2944
Hello
How can I add a sticky bar after the header but without created a “blank” between the header and the beginning of the content ?
The bar will be just after the header (both in desktop and mobile) and above the content. Even in scrolling
If I’m using a hook ‘after header’ and make it position-sticy, it’s ok after scrolling but at the beginning, there is a blank
Is there a way to do this with GP/GB ?
-
Hi there,
Can I see your site with the solution implemented?
If I’m using a hook ‘after header’ and make it position-sticy, it’s ok after scrolling but at the beginning, there is a blank
-
ben2944
Hi Ying
thanks for your reply. Unfortunatly the site is yet in Figma’s conception, I just make some tests in a local staging site. ^^;
I’ve come with this code :
.bar { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); width: 100%; z-index: 1000; }
But I would like this code only on homepage and this one for other pages :
.bar { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); }
My element is hooked “after_header”.
May I do this two configurations without creating two elements ? (I’ve tried whith a Css’ selector like ‘.home’ or body:not(.home) but like my element is placed on all site, it does not work perfectly. And I would like only one element because I will have to change some text periodically)
-
David
Hi there,
in your Element add Container within a Container eg.
Container Block #1 ---- Container Block #2 ---- ---- Your top bar in here
Container Block #1 set its Position to Sticky.
Container Block #2 set its Position to AbsoluteThis will make the second container and its content take up no space on the page. But it will remain attached to the sticky container
- You must be logged in to reply to this topic.