Sticky navbar not scrolling all the way down on desktop menu

Hi everyone!

I’m trying to re-create the navigation on this website BEACON – HANS ROSENSTRÖM

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)…

Here is my site Read-Only: https://preview.webflow.com/preview/jaskan-site?utm_medium=preview_link&utm_source=dashboard&utm_content=jaskan-site&preview=aab489dcae987f283a4d19af3d1572cb&workflow=preview

Could some one point me in the right direction, please?
I know this is possible I just haven’t figured how to do it.

Cheers!

-Seppo-

Hi @Seppo_Riiho , thanks for the good question.

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:

Shared with CloudApp

For the individual element styles, I would suggest using the following:

For Right Wrapper class:

Shared with CloudApp

For Left Wrapper class:

Shared with CloudApp

For Side Navbar class:

Shared with CloudApp

For Block (left padding) class:

Shared with CloudApp

The result I see in the designer looks a little like this:

I hope this helps, let me know in case of any questions.

1 Like

Thank you for your response @cyberdave☀️

Actually I jumped the gun a little bit there…

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?

https://preview.webflow.com/preview/jaskan-site?utm_medium=preview_link&utm_source=dashboard&utm_content=jaskan-site&preview=aab489dcae987f283a4d19af3d1572cb&workflow=preview

-Seppo-

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.

Shared with CloudApp

For the All Wrapper class:

Shared with CloudApp

For Left Nav Wrapper:

Shared with CloudApp

For Side nav wrapper:

Shared with CloudApp

For sidebar nav:

Shared with CloudApp

For Right Wrapper:

Shared with CloudApp

For Block:

Shared with CloudApp

After those changes, it looks like this for me in the designer:

I hope this helps

1 Like

It sure helps!

Thank you once again @cyberdave :sunny:

-Seppo-

1 Like

Ok…:joy:

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.

Cheers again!

-Seppo-

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.

See a quick video I made:

Here also is an article on using position including sticky position: Position | Webflow University

1 Like

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.

https://share.getcloudapp.com/d5uNERyr

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.

See this post, it might help to give you additional options: How to use Webflow & Sticky.js

I hope this helps

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.