Sticky lateral menu

Hi, it’s possible to create a lateral menu like this? http://www.studioecp.it/

Hi Enrico,

Yes, you can create something like this by adding a couple of custom classes. I did that on my October template. You can check the demo here.

Cheers,
Eldar

Can you help me how to do that? Can you share your project or something?

Yes, I am not in front of my Mac now. When I get a chance, I will check what classes I have used to archive that.

3 Likes

Thanks! I will wait for your answer

Great - First Template on left sticking Menu.
Wonder if same will work on Blocs “4” if transfaring efforts made in version 3?!

Hi Enrico,

I have used the class with 20 vw and 100 vh for the sidebar (I made it using the Card bric). You can see the screen below.

I have also added the code for this class via the Code Editor to set the z-index value and made the position fixed.

Something like this:

.october-sidebar {position:fixed;} .october-sidebar {z-index:282828;}

and how can I make it transparent?

Thanks for the screen, I noticed now that you’re selling this project, sorry

No worries, I am happy to help in any way I can.

You can go to the background settings of this class and set the color opacity to be anything from 0 to 100%.

If you have any other questions, let me know!

Cheers,
Eldar

1 Like

You created the card on the top area? How can I make it sticky?

Hi, I tried the code, but when I add the card to the header and add your code to code editor, it show me the code, check image

can you check my project?
https://drive.google.com/file/d/1-02-ffzpVDTkkCpCtUxC3ABqB9cU1rlC/view?usp=sharing

hi @theenrico I haven’t looked at your project but I suspect you are missing the style tags around the css.

<style>
Your css code here. 
</style>

HI, I tried it, but doesn’t work


@Eldar can you check the updated project?

https://drive.google.com/file/d/1qeQrElaWsel5L4rQkpcCznM5zMmvF4ID/view?usp=sharing

So weird, I can’t even see where you added that code, there is nothing visible in the code editor at all?

It’s also appearing in a strange place.

I added it in code editor

Hi @theenrico,

I found it, you had it in the project header, I had only looked in the page header.

your code is

</style>
.lvg-sidebar {position:fixed;} .lvg-sidebar {z-index:282828;}
</style>

You have a closing tag at the beginning, it should be

<style>
.lvg-sidebar {position:fixed;} .lvg-sidebar {z-index:282828;}
</style>
2 Likes

It worked! Thanks!

1 Like

Hi, can you tell me how can I make responsive the bric in the lateral menu?
If you check here: studiolvgvacchino.it sometimes it show empty space at the end, and other times it can’t show all the brics

Minor issue, but it’s good practice to put all attributes into one pair of curly brackets instead of calling the same selector several times, which I’m sure Steve knows, but for anyone else finding this, it might be useful. It’s even better readable for others. Just saying :wink:

<style>
.lvg-sidebar {
   position: fixed;
   z-index: 282828;
}
</style>
2 Likes

Correct, actually I didn’t notice they had done that, I was just looking at the tag.

Re-reading the thread I see thats what Eldar put down earlier. We seemed to all miss that one. Nice spot.