Fixed vertical navbar

General Discussion
#1

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.

#2

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

#3

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.)

#4

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): https://www.youtube.com/watch?v=AEbAtWEp60I

Hope this helps.

1 Like
#5

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
#6

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?

#7

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
#8

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

#9

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

Offcanvas
Offcanvas1186×1582 595 KB

1 Like
#10

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.)

#11

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
#12

Just spend a few minutes of your time to understand better the endless possibilities: https://blog.getbootstrap.com/2021/03/23/bootstrap-5-beta-3/

1 Like
#13

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

2 Likes
#14

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.)

#15

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