The main downside I see of using the Columns stack to create a sidebar is that the width of the sidebar column is still variable based on the device/browser width. Quite often when using a sidebar, I’d want the sidebar to be a set width. I’m not sure there is a good solution to that, though.
You want just about everything to be flexible when designing a responsive site, including your “sidebar content.” Plus you can set different “sidebar” to different widths at each breakpoint.
I guess it really depends on what’s in your sidebar. If your using it for navigation, I’d want it to be wide enough for the width of my nav items and no wider. Being wider only decreases the main content area.
If you look at Amazon’s search results. The side bars are fixed-width (search refinement and Sponsored results). That shows two examples of where fixed-width sidebars work well.
This isn’t a huge issue for me. As you mentioned, with the break-points it can restricted somewhat. I just wanted to point out that there are a number of times when fixed sidebars are useful, since sidebars were being discussed.
Thanks for that Adam. Very helpful. Is there some way of setting up a “sidebar” so its contents remain visible as the user scrolls down a page. I like having contact details in the “sidebar” so they are in the user’s face all the time. Seems more effective than having them in say sticky content.
Yep, sure is, using the Columns stack and the Sticky Content stack. Here’s a rudimentary example project file showing it: http://d.pr/f/P9v0nU
Hi @elixirgraphics, thank you for the example. Feature request: Can you make the transition smoother, e.g. when you select “Expand to full width” the transition is very fast. So if we could fade out the box and fade in the full-width box, that would be great.
Probably not. It isn’t two different elements. It is the same element that is gaining new positioning CSS.
Thanks for the example, @elixirgraphics. Any chance of a future update allowing for “unsticking” of sticky content when they reach a point on the page.
In your example, if there is full width content below the sidebar area (footer, image, map, etc.) the sticky sidebar could overlay that. I can see some layouts where I’d like to have the sticky content contained in that left column. In other words, when it got to the bottom of it’s parent container it unsticks and scrolls up with the page.
Yes, we really do want every thing!
With the code base that is being used in the Sticky Content stack right now, no would have to be the answer. It would require re-writing a major portion of the stack. It could be accomplished down the line, but not right now.
Addendum: I should probably be clear in saying that it would take adding complimentary code to the Columns stack as well using the current code base. It would be nice to not have to do that and make the Sticky Content stack’s functionality independent. This is what would require re-writing the Sticky Content stack’s code.
Adam: Thanks for the example. I’m not sure I would have thought of this on my own, but I am relatively new at using Foundry. I can using this approach a lot on key pages.
Brilliant Adam. Isn’t Foundry great!
Adam: using your approach it seems that I can not set up a 2 column scenario with a sticky content in one column and a modal or slideshow stack within the sticky. I can create that situation, but it doesn’t seem to work. Or work consistently well. Is this simply a dead end, or are there ways to include a modal and/or side slide stack within a sticky stack to all work together harmoniously?
@mitchellm – What is the problem you’re running into exactly? You don’t mention what is happening, just that you’re having problems.
Just a moment. I’ll try to recreate and send you a link. It’s hard to describe but easy to see.
I have put both a Modal and a Side Slide in the sidebar area to the left. I am playing off of the “sticky sidebar” example you provided yesterday. In real life I’d only use one. Probably best to try the modal first. If you are at the top of the page when you click the button all is fine. Scroll down a bit and try to use the modal and you’ll see the overlapping conflict.
As for the Side Slide it just seems to go nuts. However, again, at the top of the page it works fine. Scroll down a wee bit then use it in the Sticky sidebar and all goes nuts. Essentially the page freezes and I need to refresh to get things going.
So the bad effect is different in the two cases. Although in both cases you need to scroll down a wee bit to see the bad effect.
Here’s an example page:
BTW this seems to happen if I only have one of them on a page (instead of both).
Looks like the
z-index value for the sticky content is just higher than the others. I will have a look.
Thanks. I realize you’ll probably just update the stacks to fix this later, but if in the short term there’s a CSS bandaid I can use that would be much appreciated.
I realize you’ll probably just update the stacks to fix this later…
Yeah, this will get addressed in the next update after it is fixed. Modal will be easy, Side Slide more difficult.
…if in the short term there’s a CSS bandaid…
I would rather focus my energy on fixing the problem within the stacks themselves rather then create “bandaids” that float around the forum confusing people in the future when they come to an old thread. I’ll get it addressed.
Your project isn’t until late July though, right? So no need for a “bandaid” as I should hopefully be able to get it fixed by then.
Adam: I understand re: bandaids.
Of the two, the Modal stack will be the most important one for me to use in the short run. I can easily see using it in a sticky sidebar for things like a statistics course so students can quickly review/see a particular equation or definition.
Once they’re all fixed up I’ll get them into the next update.