Streaming live at 10am (PST)

Scrolling with side navigation


#1

Hi there everyone. I have been trying to teach myself how to use this site from scratch for a client, which has been great with all the videos but I seem to have gotten myself stuck.

Right now you can see that I have a side navbar that takes you to ‘cafe’ when you click on it, and back to ‘story’ if you click on that (though currently they are both just the story section). What I would like to do is make the sections a bit bigger (maybe 90% of the page height) and also make them scale properly with browser size changes as currently when I make the browser smaller, the sections overlap underneath the menu. It also has too much of a gap at full screen (in 1080p) between the menu and the content to the side that I don’t seem to be able to adjust without completely throwing something else ‘out-of-whack’.

I have tried various things to try and fix this and watched many videos but I feel maybe I’m missing something fundamental? Originally I just had the ‘story’ section up and spent a while trying to work out how to put another section underneath it and this excellent video: https://www.youtube.com/watch?v=snQKevxR5Dc&t=910s seemed to suggest I should put the whole lot in a container. Which allowed me to set up the scrolling sections but also made everything smaller and caused my overlapping issues. That said, I’m certain I just missed something that’s probably obvious.

Thank you in advance for your help, below are the preview and ‘live’ links.

https://preview.webflow.com/preview/jamface?utm_source=jamface&preview=d5ee91dc59f468d1372e4f269042448c

http://jamface.webflow.io/


#2

I’ve watched a few more tutorials and still remain a bit lost as to why this isn’t working. Please can anyone help? Thank you


#3

Hi,

A quick answer. You can set the Nav to be 80VH (write 80vh in the hight input) And You can do the same for the nav links. So if you have 8 links, each would be 10vh.

I also recommend that you make this from scratch and don’t use the Nav component. Because you only need one div and then the linkblocks with the image as a background. Makes it easier I guess :slight_smile:


#4

Ah I don’t need to use the Nav component? This helps me a lot because I’ve been so confused about that, especially with translating it to mobile and tablet later down the line!