Fixed vertical navbar

Hi, instead of necroing old threads (from 2018 etc), asking afresh:

Is there a supported, “non-hackish” way of adding a fixed vertical navbar.
The old way of adding stuff like this to every page does not work well:
.fixed-left{ position: fixed; left: 0; width:250px; z-index:1009; }
(By not working well I mean: It messes up everything for new rows/block, you have to struggle with margin stuff throughout the project, and the GUI has no clue what’s going on.)

Mark: I have not been able to test in newer versions than Blocs 2, as the Trial version won’t allow use of Add Code, and I’m not upgrading without this functionality.

Why would the trial version (I assume you mean Blocs 4) not allow that? @Norm ???

Blocs 4, yes. I think I tried in Blocs 3 as well. Same issue. Not sure about the logic of limiting this functionality in the trial …

(Unless I’m mistaken, this issue with making a fixed vertical navbar seems to be quite similar in v3 and v4 as well.)

Hi Flips, I know @Eldar made a tutorial on this a while back. You can see how he does this on his Youtube channel (from which I’ve learned quite a lot, thx Eldar): Build websites with vertical navigation in Blocs - YouTube

Hope this helps.

1 Like

Position settings are part of the class editor in blocs 4. There you can easily set a bloc to, for example, 20vw width and position fixed.

1 Like

This wouldn’t be a dynamic menu/navigation bar, just a manually created one, or did I miss something? :slight_smile:

And you can assign the menu/navbar to a fixed sidebar position without having to adjust margin of all other main content area blocks?

Hi @flips,

I am sure - but might be wrong !! that @Whittfield has Tab anything with some simple design I am sure vertical navbar is possible.

I might be totally wrong !!! but it’s working asking him.

1 Like

I guess I can conclude that it still does not work satisfactory in Blocs, then … :man_shrugging:

Hi @flips. Yes, it is possible with Bootstrap 5 B3 in Blocs 4.2 B2. The new Bootstrap class .offcanvas does the magic.

1 Like

Looks like a sliding in/out overlay.(?) I’m looking for a fixed vertical area for where the default navigation bar can live and be updated, without having to tell every added module/bloc about a different margin …
(@Eldar’s theme has it correct layout wise, except it’s manual, not dynamic/using the default navbar.)

I have a new template which has a better vertical navbar, fully responsive. I will release it this week and make a tutorial about it.

2 Likes

Just spend a few minutes of your time to understand better the endless possibilities: Bootstrap 5 Beta 3 | Bootstrap Blog

1 Like

This is definitely coming to the updated version of my Construction template! Very cool!

2 Likes

So, I finally got some time to play with (and buy) Blocs 4. :partying_face:
I have been able to make a fixed vertical sidebar containing the navbar in Bootstrap 5 in a (different) Wordpress theme, so I think I understand the logic. (Using .sticky-top, .min-vh-100 and such.)

But I don’t know how to implement that knowledge in Blocs.
I have questions like: Should I disable header/footer and put this in a regular body bloc?
(I assume I can’t just import/copy the working bootstrap 5 HTML code directly, having Blocs sort stuff correcly into the GUI? That would be fancy/neat.)

Maybe @Eldar have a newer video (than the Blocs 2 video referenced earlier) showing how he implemented something like this? :slight_smile:

I put fixed in bold, since I’m not too interested in an overlay/menu sliding in, but a fixed sidebar, that is always present and doesn’t move at all – on desktop.) That Contruction Template looks like it’s using the sliding overlay.

(Hope it’s ok to revive an old topic of mine.)

There are actually many ways in Blocs 4 to make a vertical menu/sidebar. I explain in detail one of the methods in this video:

1 Like