Streaming live at 10am (PST)

Section scroll on nav tab selection

#1

I am working on my first project in Webflow.

I have achieved the layout shown below where 1 is an image, 2 is the slider, 3 is navigation and 4 is the main content.

I am facing two issues:

  1. Navigation tabs and section ids do not seem to work. Meaning the active navigation tab always stays on the first section.
  2. When scrolling or selecting a navigation item I want the section in main content to take the full height. Not sure how to achieve this in Webflow.

Any direction will be helpful.


Here is my site Read-Only: LINK

#2

The navigation tabs and section ids do not work because it is targetting a div block of which the overflow is set to scroll. As far as I know section id’s cannot target specific div block’s scroll overlows.

This must be possible with some custom code I think.

You can however bypass this by setting the side slider’s wrapper’s position to fixed and setting the width to 50vw (50% of the viewport’s width)

Then setting the section 4 (on your image) to overflow visible and putting the divs 1 and 3 together in one. Once they are wrapped together you canset that div to position fixed as well and it should work.

I would’ve made a video tutorial but I’m quite busy at the moment, let me know if you need any more help and I’ll make a video tutorial for you later today.

#3

Thanks for your suggestion about fixed viewport widths. This makes the wrapper’s display:grid irrelevant altogether. I would prefer to stick to the grid layout.

IDs are set to sections inside the DIV. Navigation tabs are targeting sections with overflow:visible.

I will think about this a bit more.