I’m building a test site and I’ve added an icon bar to to the top of this page. Until I make it sticky, everything works well but when I make it sticky it shifts off centre and is sticky for a bit and then disappears.
I would like it to be sticky, and I’m not sure if it’s behaving as it should.
Hey there @Neil!
Can I get a copy of that project file? If so I can take a look and let you know the problem.
Just got it! Will have a look.
First thing to do is to switch the Fill Mode back to Fill and not Flexible:
You’re essentially setting the width of the stack to 100% width of the browser, which won’t work because you’re also setting margins, which you need to also turn off these margins you’ve set:
The Fill Mode setting doesn’t really ever need to be adjusted when using Foundry. It is one of the main Stacks settings. Foundry’s stacks normally have their own settings for these things as they’re handled by the framework. Same with the margins.
If you want spacing around the Icon Bar you can use a Margins stack to add padding. This padding will be carried over when it is sticky-ed though. The Icon Bar is not like the Navigation Bar in that it does not go full-width when it is sticky-ed.
Hi @elixirgraphics,
Thanks for the quick reply.
I’ve done what you suggested and it’s looks better, but I’m not completely understanding the sticky part.
It doesn’t seem to matter how I have the bar, it won’t stick. If it’s not supposed to stick like the navigation, I can work with that. I can’t seem to grasp in what situation the sticky aspect would work.
Neil
It doesn’t seem to matter how I have the bar, it won’t stick. If it’s not supposed to stick like the navigation, I can work with that. I can’t seem to grasp in what situation the sticky aspect would work.
Strange, when I use your project file here it is sticking just as it should. Are you seeing a different behavior than this: http://d.pr/v/PVpH
Actually, when I look at it like you were in the video, it works like that. But after publishing, it’s not sticky.
So, as I was typing I suddenly thought about trying it in another browser. I normally use Firefox, but I tried it in Safari and it’s working (sticky).
In Firefox and Brave (Chrome), it doesn’t stick.
Seems to stick fine here in Firefox and Chrome, but for some reason the latest versions of their browsers are causing it to lose “adhesion” after a specific distance: http://d.pr/v/ZSyV
I’ll add it to the issue tracker and have a look at it.
Yes, mine acts the same but it loses it stickiness sooner than in your demo, maybe because the contact form is directly under it.
I’m going to un-sticky it for now. It’s not such a big deal if it’s a pain to fix in FF and Chrome.
Many thanks for looking at it.
Might have a fix for it, which would just reuse my method for the Navigation Bar stack when it comes to the stickiness… In the process I also found a pretty obscure little bug with the Navigation Bar’s sticky option. Will work through these some and see if my few tests break it or not. If all is well I can include a fix in the next update.
Just pushed Foundry v1.2.2.2 to the update server. This update should address the above.