Archived topic
Sticky Nav contain Block Element?
8 replies · Started by Ian on August 31, 2021
When the website loads, I have a Block Element that loads a bar with a grid. Added some icons and telephone numbers. When scrolling, this would disappear and the sticky nav takes over. Is there a way to pin the Block Element above the sticky nav upon scrolling? We want the Block Element above the header to stick along with Sticky nav. That may be possible with some custom CSS? Any ideas?
Hi Ian,
I believe it's possible to make it behave the way you mentioned it to.
But depending on how you've structured the page, it can get pretty tricky to do as it may require custom JS that may be a bit out of our scope.
If you're using the setting "Use navigation as header", we may avoid using custom JS.
You can hook in the Block element on generate_before_logo and do CSS with it so it appears on top of the logo + menu bar layout. This way your Block element technically rides along with the other elements within the navbar when it's being controlled by the sticky script of GP Premium. :D
That is insightful Elvin. I have tried various hooks and even the custom generate_before_logo. Things are just not displayed the right way. Would you be able to provide the proper CSS to make it display properly?
Would you be able to provide the proper CSS to make it display properly?
CAn you link us to the page/site in question? So we can check the structure and provide the CSS writeup. :D
Thank you in advance! I have added a URL.
Can you try and see what happens if you add this CSS?
header#masthead {
position: sticky;
top: 61px;
z-index: 9999;
}Hi Elvin! That is super close. I had to adjust padding but with the custom sticky CSS I already had in place for the top bar, the desktop sticky nav displays properly now. How do I adjust the same top spacing for Layout > Header > Mobile View > Sticky?
Hey Elvin,
I decided to go another route to find a solution. By disabling Sticky Nav in Customer for Desktop and Mobile, I am now using css to stick both the top bar and masthead section at the top of the screen. Everything seems to work well across media queries. Thanks again for all of your help! Your css above made me look at this problem another way. As always, thank you!
No problem. Glad to be of any help. :D
