Where can I learn how all the options and settings work for Sticky Setup in a header bar? There doesn’t seem to be anything in the docs, and I’ve just spent some time searching in the KB, no luck there. I would prefer not to do a trial-and-error approach on either the settings themselves or KB articles with partial or no useful information. What’s the best way to cut to the chase on this please?
Hey Frank,
We’re sorry that you had a hard time looking for the stick header setup in Pro.
To make a Bar sticky, inspect the Bar and enable the Stick Bar option.
Here’s the details about the Stick Setup options.
- Keep Margin - When you set the bar to Absolute Initial Position, you’ll see Margin options. If the Keep Margin is enabled, it will “keep the margin” when the bar is sticky.
- Hide Initially - Sticky Bar is hidden until it hits the Trigger Offset position.
-
Z-index Stack - If the Bar gets covered by other elements, setting this to a high value like
9999will stack the bar on top of the covering element. - Trigger Selector - Makes the bar sticky or displays it if it’s hidden initially if the target element hits the top of the page/screen.
- Trigger Offset - Similar to Trigger Selector but based on number of pixels scrolled instead of using an element selector.
- Shrink Amount - Shrinks the bar when it becomes sticky. The default value 1 means 100% height so the bar won’t shrink by default. 0.9 means 90% so the bar will shrink by 10%.
Hope that helps.
I didn’t have a hard time finding the sticky setup, I had a hard time figuring out what the settings do.
Your explanation is helpful, will save some time figuring out how to make it do what I want.
Thank you very much, I really appreciate it.
You’re always welcome Frank!
This youtube video might help you too. Please subscribe to our youtube channel for more guidance.
Cheers.
Oh that move he did in that video is very cool. I might just use that in my site…at some point.
But what if all I want is my header to simply not ever move? Based on all the lovely clues you’ve given in this thread, I still can’t figure that out. I have tried all the different options in the Sticky Setup, and no matter what I put into Keep Margin, Z-Index, Trigger Selector, Trigger Offset, and even Shrink amount, the result is the same:
-
I make any combination of settings in the above items (including negative values for Trigger Offset and Shrink Amounts greater OR less than 1.0); then click save in the lower left of the Header Builder
-
I go to another tab in my Chrome browser that has a sample page loaded in the Content Builder, and click to reload the page
-
I scroll with the mouse wheel
What happens is that the header scrolls up out the top of the browser window out of sight, it looks like until the page title hits the top of the window; then the header comes back down into place at 100% size. NOTE that this is true no matter what I have in Trigger Selector (even if it’s blank, or Page title) and in Shrink Amount.
Also note that if I change the Sticky to Hide Initially or Absolute Initial Position, those changes do seem to take effect after I save the header and reload the sample page in Content Builder (exactly the same procedure I did above, for which the changes seem to have no effect.
So, how can I get my header to just not move when the user scrolls with the mouse wheel, except for maybe change Shrink Amount?
Thanks.
Hi Fank,
Can you share your site URL with the sticky setup? Your current site is under consctruction so I can’t see what you have. Here is an actual simple sticky setup: https://screencast-o-matic.com/watch/cYfejh4JJv
It stays on top. Though the header is simple.
Great, thanks, now I believe it’s actually possible to have a sticky header that sticks. I’m not sure how that was supposed to help me make my own header behave that way. I’ll provide you with admin access to my WordPress environment so you can log on and check it out. My site is even simpler than your example, I don’t even have any puppies yet. If you open the Content Builder or the Footer Builder, you can see how the header starts to scroll with the page, then comes back down into place. In Header Builder, you’ll see that my header has one bar with two containers in it. Please show me how to make it so the bar doesn’t move when I start to scroll the page.
Hello Frank,
In the custom header, when you set it as a sticky bar, it needs to move to the top of the page first before the sticky bar will be triggered. This is how the sticky bar behaves in the custom header. I am assuming that you meant to have a Fixed Bar which is way different from the sticky bar. A Fixed bar will stay fixed because it is initially positioned as Fixed already. Regretfully this is not present in the header builder settings.
Hope this makes sense.
Thanks for your reply. I’m sorry, it does not make sense to me:
You say "In the custom header..." - I’m just in the header builder in Pro, does that make it a custom header? What I’m trying to do is pretty standard. What’s custom here?
You say "...when you set it as a sticky bar, it needs to move to the top..." - What are you referring to as “it”? The bar in my header? There’s only one bar, and it starts at the top. What needs to move?
You say "Fixed Bar" - I only see one kind of bar I can put in a header, it’s called “Bar”. By "fixed bar" do you mean a bar with sticky turned off? If I turn off sticky in the bar, then the header scrolls up out the top of the window when I scroll, which is not what I want. Are you talking about Absolute position? I tried that, it doesn’t do what I want either.
You say "...this is not present in the header builder settings." - What is not present in the Header Builder settings, a "fixed bar"? Then how do you make a fixed bar which will stay put when the window is scrolled? Isn’t that what sticky is? What do you mean not present? Certainly it must be possible to make a header that starts at the top of the page and stays at the top of the page when the page is scrolled, without moving first. Lely’s puppy link
https://screencast-o-matic.com/watch/cYfejh4JJv does exactly that.
How do I make a header, in Header Builder, that works like Lely’s puppy header, and looks like my header, with a logo on the left, a headline with the site title, and a navigation menu with dropdowns? This has got to be one of the simplest possible header configurations. Surely you’re not telling me it can’t be done, are you?
I’m trying to keep my site simple so it’s easy to build, yet with all the magical gymnastics possible in Pro, it seems after a week of going back and forth, that it is somehow very complicated.
What’s the problem? Am I not following some normal way of building a page?
Would you please look at the picture I’ve made to explain my header and tell me what’s wrong with it?
Hey Frank,
We’re very sorry about Ruenel’s response. What he said is not relevant to the issue you’re experiencing so I’m not going to go through and explain his response to save time and confusion.
Your setup is fine. You didn’t do anything wrong. It’s just because of the double scrollbar issue why it looks like the header doesn’t stick. Setting the Footer Bar’s height to auto will resolve the issue and make the sticky header work. You can watch the explanation in the screencast attached in the Secure Note.
Hope that helps.
That’s perfect. Thank you so much for the correct answer. It’s so great to just cut to the chase finally. Much appreciated.
AND my site has magically changed the setting. Thanks for making my site magic, too.
You’re always welcome!
Cheers.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.