I love the Flex stuff and am working on the Side Bar Layout - following the Video Closely. I get that… and have duplicated it, but my issue is I need the following and cannot seem to get it to work - maybe it doesn’t work this way… If not, please suggest how or an alternative.
Side Bar - Flex
Left Panel - Navigation (want to add) sample just shows graphic
Left Panel - Stay in Place / Frozen - while -
Right Side (Main Stage) - Moves down to the Page (executed by the Navigation in the left bar)
This seems like it should work, but cannot get it to work….
Scenario
4 Navigation Items in the Left Bar
Select/click number 2
Right Side (main panel) Slides down to that page while Left Bar Remain in place and frozen. Cannot get this work and it seems like it should
Here is my public share link: LINK
([how to access public share link][2])
I am not quite sure why do you want to use flexbox when you can do this simply by making navbar position: fixed and give all nav links settings display: block. Then just add left padding to the body equal to the navigation width and you will have such structure as you showed in the video.
Thank you for your help! Doing what you suggested has worked (in place of Flex). I saw the layouts and started in that direction (with Flex)… Thank you for helping me see the better approach. I structured the layout as suggested and it is working. I created 3 sections (800px height), colored their background, just to Test the Navigation. Interesting thing… the navigation is working, but (the section i am testing sect3) moves up, but not far enough to the top? So the code is working, but is there an adjustment or like that I need to do, to get the page/section 3 to come to the top? It moves into view, but only (like) the bottom 20% of the screen and I need it to come to the top of the page? Thank you so much! (new to webflow…)
It happens, because the HTML5 “rule”. With scrolling navigation section, which has to scroll into view will stop right under the fixed navbar. It made for avoiding content hiding behind the navbars. Since your navbar is full-screen height, the section that should appear, stops right under the screen view.
Sorry, it was my fault. Should remember this before feature
For fix it, you will want to wrap the navbar with a div. That div will have to have settings position: fixed and navbar position: relative.
