Floating Vertical Navigation

@cincyplanet forgive me… I forgot I’m on a 27in. iMac so your entire page fit on my screen. When I tried to scroll, everything moved, thus my comment.

After resizing, I think you acheived what @Bertus_Schoeman is looking for!

Ah, yeah, that would do it.

Ah, wow! Thanks for all the help guys - much appreciated!

@vulture, hehe. @cincyplanet that’s exactly what I’m looking for :smiley: If it’s not to hectic would you mind sharing with me how you managed to create that @cincyplanet.

Thanks again for the support!


@cincyplanet wrote:
Like this: http://mydealershipsolution.com/newsite/

That looks very promising … how to do that in Blocs 2?
Did you have to add CSS by hand at page level or something?

@cincyplanet how did you achieved this?

One way of doing this, seems to be to remove header and footer. Then you seemingly have to create the menu manually for each page.

Also the video doesn’t show how to make the sidebar fixed etc.
I was hoping I could add dynamic sticky menu to the main/right area, and keep a fixed left sidebar.
If I can make my own snippet/widget for the sidebar, that should be doable. But I’m not sure Blocs’ included automatic menus, without turning on header/footer (which would break this setup) …

Hm, there’s only one row per bloc?
If so, a fixed left nav/block cannot be done this way …

You manually added .myfixed somehow? :slight_smile:

Almost reconstructed something similar, by adding class to page, but how did you tame/contain the right 67 %, @cincyplanet ?
I seem to get the right body flowing behind the left fixed (myfixed) bloc … If I modify .container, I also modify the sticky sidebar block …
Adding a restraining class to each bloc seems wrong.
Or are you just adding empty blocs to fill the left? :smiley:

I guess a real well-functioning vertical layout is not really easily implemented in Blocs 2, then … @Norm ?

Any luck with the vertical sticky menu. This is pretty much a deal breaker for me.

You cann add this code to your page

.fixed-left{ position: fixed; left: 0; width:250px; z-index:1009; }

You have to adjust the width to your need. Then you have to add the class “fixed-left”.

Sounds very interisting.
Where to put the code in the page settings?
Header and Footer won´t work.

Or after export manually?

Yes, put the code in the page settings -> “Add Code”

Then use a div and add the class “fixed-left” to it. There you should set min height to 100%.

In general this works also with global header and footer. The tricky thing is to get always at the left side a margin/padding of the width from the created sidebar (in the example 250px)

1 Like

Thank you so much for taking the effort explaining this.
Works well :+1:

Hi everyone, sorry my english but I use a translator …
I had this idea to have a vertical menu:
I created a “list” class to apply to all “list item” elements

and I got this result:

using the tools to manage the columns you can move the menus at will
I do not seem to have found this solution in the forum, in case it is a repetition I apologize to everyone.
and thanks for the help you give every day!

A video explanation will come in handy.

I have to redo a website that I made with muse for a client who requested the same header, so I had to look for a method to make the vertical menu, which was part of the nav toggle.
With difficulty I managed to have this result:

I like the cleanness of the web, the vertical menu is realmnet easy, just place a normal menu and add a fixed class and ready that will automatically make the menu turn vertical, I saw that they placed the code above! That will help you.

I like the typography of your site.


thank you :slight_smile: