Floating Vertical Navigation

Hi everyone, hope you’re all doing great!

I would like to duplicate this floating vertical navigation - http://eatthairestaurant.com. Any help would be much appreciated.

Thanks in advance! Have a great day!

Hi everyone, any suggestions, thoughts and ideas?

@Eldar maybe you can help? :wink:


Nothing comes to my mind at the moment.
I will try to figure out the way to archive that.

Like this: http://mydealershipsolution.com/newsite/

@cincyplanet It doesn’t look like those would scroll interdependently.

Check this out.

Maybe I don’t understand what you are looking for. On mine the left panel stays in place while the content on the right moves up and down. So you could put a menu or whatever you want on the left side area. Not the easiest setup in blocs to do though.

@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