Sticky Nav start position below Banner

I’m new to Source and can’t seem to figure out how to place the Nav below the main banner, make it sticky and keep it below the banner stack until it reaches the top of the page before it becomes sticky. As it is now, every time I select the Sticky option in the Nav stack the Nav goes straight up to the top of the page even though I have it placed below the Banner.

You can put the Nav in a Chroma Pro stack and set it to sticky. If you do not have it you can download it at BWD homepage: Choma Stacks for RapidWeaver Maybe the page title should be renamed :-)

2 Likes

This is a really common use case. Therefor I hope this will be in a future update to the Source nav stack. I use Chroma Pro just for this feature, which is a bit overkill in my opinion.

Here is the site I made with Source (for my personal use) https://www.ljudovision.se/
You can see the menu “when sticky fixes”.
It is my first site using Source and I´m still learning and modifying it every now and then.

3 Likes

I will definitely get an option for sticky added into the Source Nav stack. I keep intending to but then forget about it. Have noted it down (again) now though so will try to get it into one of the next updates.

Just to point out though that your example @Hovstadius is not acting as a sticky element - you have it fixed to the top with a slide away element. You would want/need to be using Chroma for this effect even if the Source stack did have a sticky option.

4 Likes

Hi all -

For info…Source 2.6.5 (available now) includes the option to make the Nav bar sticky.

Note: The sticky behaviour in the Nav stack is achieved just via basic CSS and will be sufficient for most needs. If however you want/need to style the nav bar differently etc once stuck then a stack like Chroma will still need to be used.

9 Likes

Thank you @habitualshaker for adding that option. It didn’t work for me at first because I had my nav bar inside an Animate stack, but once I took it out of the Animate stack it worked like a champ.

1 Like