Streaming live at 10am (PST)

Help I Can't Lock My Sidebar & Navbar in Place


#1

Hi All

First can I just say I'm new to Webflow and absolutely love it. I've mainly designed on basic wordpress & other platform builders and Webflow is amazing in comparison. I have clicked around a lot and changed things that I don't remember so apologies if my site looks like it's held together with duct tape behind the scenes.

I'm having trouble with one page (Startups) - basically I followed the Webflow tutorial for creating a fixed sidebar layout design but I added a navbar at the top and a form in the sidebar. Now the page doesn't behave the way I expected:

When I scroll down the navbar disappears and the sidebar stays where it is, leaving a gap above the sidebar. What I'm hoping to do is lock the sidebar and the navbar in place, so that the only bit that scrolls is the text content section on the right, leaving the navbar visible at all times, and leaving the sidebar and form also visible.

Thank you enormously in advance for any help you can provide, let me know if anything I've said is not clear :slightly_smiling:

H


Here is my public share link: https://preview.webflow.com/preview/harry-palmers-dapper-site?preview=6748c3eb0b88dd021cdebbccec9929c9
(how to access public share link)


#2

Hi,

Ok so on the startup page.

It seems as though you have solved the problem you mentioned above.
However it looks like you have a couple other problems with that page, likely to do with the widths of certain divs, at least in preview mode.

Check out the tablet and mobile views.


#3

Hi @harrymakeywebsite, thanks for your question. I would set the Navigation bar to fixed, with a top anchor.

I made a quick video, I hope this helps:


#4

Hi @Cyberdave - thank you so much for that video it has totally solved my problem! And I've learned about Z indexes which is cool, so many thanks again.

I just noticed that the mobile view has some issues (@RCM mentioned it above and he's right, it goes completely insane...) is there a quick fix for that as well or is that likely going to require a page rebuild?


#5

https://preview.webflow.com/preview/sidebar123?preview=34b826b81cde6c5e6fa165619816b808

I made the layout I think you're after.
I made the navbar fixed but that's all.
There is a wrapper that is 100vh with a 75px padding to adjust for the 75px navbar (use the size you want) and overflow content hidden.
Then a few wrappers to arrange content, it's best to have a look.
350px width for the sidebar wrapper and fill for the main wrapper.
And set the main wrapper to scroll for overflow.

I tweaked around once it got down to landscape mobile cause it started to get messy.
At this level i put show overflow for the original wrapper, and 100% width for the sidebar wrapper.
Depending whether you want the form at the top or the bottom, you can change this by selecting side bar wrapper and changing the order to first or last under 'flex child settings'.

By the way, I was like that not too long ago when i started on webflow.
Try to build something, play around with the settings, it would turn into a mess, so i would toss it and start again.
Each time getting more efficient and having a better understanding of what the settings do.
Replicating through webflow preview is helpful when i don't understand how to achieve a certain outcome, you get to see how the settings have an impact on the layout as you go.


#6

Hi @RCM thank you so much for your advice, I will sit down and work through what you've suggested myself tonight and see if I can replicate that result!

I definitely need to spend more time on things like this, working through each problem individually, so I massively appreciate you taking the time to explain your method.


#7

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