I’m not able to make the long navbar scroll all the way down for some reason unless the page’s content is equally long. This means links situated lower in the navbar will not be accessible if you are viewing a page that has very little content (shorter than the navbar itself)…
I would suggest a couple of small changes to the element structure and to the class styles so that the overflow in the left scrollbar should scroll, see the image below on how I would arrange the element structure:
For the individual element styles, I would suggest using the following:
For Right Wrapper class:
For Left Wrapper class:
For Side Navbar class:
For Block (left padding) class:
The result I see in the designer looks a little like this:
I hope this helps, let me know in case of any questions.
Your suggestion works nicely except the sections (Block class) which are supposed to be filled with content all stack in the bottom of the page. If I were to add a title in the first section it would only be visible after scrolling down some.
How could I get them to stack up where the viewer can see them?
Hi @Seppo_Riiho, thanks for the update. I would use add an additional div block and break oup the page into left and right and use flexbox to style the elements.
Add a Right Wrapper as a sibling of the Left wrapper and put div blocks in the Right wrapper.
For the All Wrapper class:
For Left Nav Wrapper:
For Side nav wrapper:
For sidebar nav:
For Right Wrapper:
For Block:
After those changes, it looks like this for me in the designer:
So now it’s almost working. My apologies @cyberdave for going back and forth. I just realised that the stickynes works differently on BEACON – HANS ROSENSTRÖM…
That navbar scrolls along the page until it reaches it’s own bottom and then sticks as the right side of the page (all the content) scrolls further down. On my page the navbar sticks to the top of the page and is released to scroll all the way down only after the right side of the page reaches it’s bottom. The UX is a lot better with Hans Rosenström’s site.
I guess this is a question of using position sticky correctly now, which I’m not able to figure out.
Any ideas how to make it work? The problem is best visible on my site’s collection page Projects Template.
Hi @Seppo_Riiho, thanks for your reply. Here is an update I have, I am not 100% sure what you are trying to achieve, but it sounds like you are wanting to have an offset for the left nav to scroll with the page until some point, then stop scrolling before the block content stop scrolling?
If so, you might try using a negative z-index for top to offset where you want the sticky nav to start based on the length of all content in the All wrapper div.
Yes, I think you know what I mean. Sorry for not explaining this better.
The negative z-index you suggested works, except the nav only starts to move up after you have scrolled the page all the way to the end and then comes back up…
Here Weaving, yearning – London – HANS ROSENSTRÖM the nav moves up and down with the page and is just limited to not scrolling past the point when it’s bottom reaches the bottom of the page. The nav moves up with the page where ever the page is scrolled up.
Hi @Seppo_Riiho, in Webflow the sticky position is always relative to the direct parent element, so it will be sticky for the length of the parent element.
Unlike in the example you provided, the sticky position Top is not reset to the current scroll position when the user immediately scrolls back up – so the user needs to scroll backup up the page to the defined sticky top position set in the designer before the element having sticky position will revert to relative position.
That example page you were referring to is using some sticky method, different than the way Webflow sticky position works.
You can probably achieve this, but it may require some custom code using some sticky plugin that will give more options than what is available natively in Webflow using data-attributes on different elements.
