Streaming live at 10am (PST)

Click Through Section

Hi,

I’m new to Webflow and have made good progress but I’m stuck with an issue that I’m hoping someone out there can help me with…

I have two sections one on top of each other; the first contains a vertical nav bar, the second contains a bunch of content including stuff that needs to be clicked on. However, irrespective of z levels, I cant seem to be able to click links in either section. I need to be able to click through the nav bar section to the content ‘underneath’ if that makes sense.

Here is the read only version of the proposed site: https://preview.webflow.com/preview/krm22?utm_medium=preview_link&utm_source=designer&utm_content=krm22&preview=e018f0b57750628c9b3deee819df5ef6&pageId=5ecd4bae0eca226b4492156f&mode=preview

Any help greatly received!

Hi and welcome to the forum :webflow_heart:

For better assistance try to elaborate (specify the page You are talking about, Record your screen when your issue is happen or attach an image). :slight_smile:

Hi Happy,

The best solution which you probably won’t want to work through is not overlapping the sections.

To create the sticky sidebar whilst ensuring the CMS items are clickable it would be be much better to create a new Div set to flex with the navbar within a left div(set width of 160px) and then a separate div with both your CMS items and headers within. You really don’t want to mess with overlapping sections as it will be problematic once you start working through the smaller breakpoints.

Good luck, let me know how you get on…

Thanks for the direction @shokoaviv

Hey @Ace - thanks for this. I’ve changed Investors -> Home to (hopefully!) match what you said should be the better method.

So one Section with a horizontal flex container with 2 div blocks; the left one containing the Nav Bar and the right one (a vertical flex one) containing divs for each section of content.

I set the left nav bar div to sticky at 224px (32 pxs below the the two blue headers) but it moves up when I scroll. Any thoughts onto what I am doing wrong there?

Cheers
Happy

Hard to say without viewing the link. Ensure the navbar div isn’t 100% height of it’s container/div otherwise it won’t stick. The sticky element(your left navbar) has to be much smaller in height than the scrollable content (your CMS lists) – maybe set a height of 300px and test it. Send an updated share link if still have issues and I’ll review later for you.

Sorted @Ace - I had the NavBar symbol set to sticky (inside the sticky div). Changing that to Static sorted it.

https://preview.webflow.com/preview/krm22?utm_medium=preview_link&utm_source=designer&utm_content=krm22&preview=e018f0b57750628c9b3deee819df5ef6&pageId=5eca0cacfd71ea08e417e881&mode=preview

Thanks for all your help buddy.
Happy

1 Like