Streaming live at 10am (PST)

Vertical menu in Flexbox setup with scrolling content area not working

I’ve used Flexbox to create a “Sidebar layout” with the intention to place my vertical menu in the left column and my content in the right side which allows for scrolling.

Unfortunately none of my menu items work after create section IDs and linking to these for my menu items. Also, none of the menu items are highlighting when the corresponding section is in view…

Do vertical menus even work in this particular flexbox setup?

Link to my site:

Hello @GoGoBjorn,

May I ask you why did you decide to use flexbox for create such layout?

Well - to try Flexbox out and the ease with which I can center items etc. I’m not even sure whether flexbox is the cause of the problem…

I would not recommend using flexbox for global layout. And for create a layout that you want all you need is set position: fixed and height: 100vh for the div, which will contain navigation.

If you want to be able to center items vertically in the navbar, set it to display: flex, but not all content container.

Okidok - I made the necessary changes and it works fine now. :slight_smile:


1 Like

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