Creating vertical nav bar its own vertical scroll and make it sticky



Hello, I’m a newbie at using Bootstrap Studio, and I’m not very experienced with front-end development, so please bear with me.

In the first picture, the vertical navbar on the right is in the correct format. However, when I scroll down, the navbar also scrolls down with the content, which is not what I want.

What I would like to do is keep the navbar fixed, just like in the first picture, even when I scroll down

I tried to fix it by adding styles of position fixed and z-index 999 but what happen is the content overlaps my navbar and hamburger too which is shown on the third picture

Hard to answer this without seeing your actual .bsdesign file. I can see in the overview panel that you’re putting your components like the Navbar and Offcanvas inside divs, which is probably why you’re having trouble with the fixed positioning. The Navbar needs to be in the body for the position options in the Options panel to affect it.

I’d tell you send me the .bsdesign file so I could take a closer look, but I’m currently stuck on an earlier version of Bootstrap Studio because I’m running Windows 7, so I wouldn’t be able to open your file.

I would start by taking the Navbar out of the div, and then try using the positioning options and see if they have the desired effect.

(I gotta get my new machine up and running so I can upgrade to the latest BSS!)

It looks like you are using the default SB Admin template, if you are going to use that then when you are creating your document click on the customize button and make sure you have Blank Page selected, then you can use this as a template and drop your reflow element into it. This should work as you require.

3 Likes