Elementor - Fixed Sidebar Vertical Menu/Header with NO code

[@lulugoh3935]

Thank you for your tutorial and for helping me solve my problem! I have a single event page with a Sticky Sidebar Menu on the left-hand side. I did not use any template to build it since it is just a single webpage. However, I used a container (which contains another 200px sidebar container). Before watching your video, the sidebar menu was blocking all hover and mouse link effects because I had set the "FIXED" setting incorrectly on the section container. This prevented viewers from clicking any button/link/hover contents! Now that I have fixed it by setting the "FIXED" setting inside the 2nd 200px sidebar container, the section container no longer blocks other content. Once again, thank you for your tutorial!

[@websquadron]

Awesome to hear this :)

[@nosheensalman980]

Hi Imran, Thank you so much. A new client came and asked for a sticky vertical header design for his site and boom you made it so easy and fun.

[@websquadron]

Fantastic!

[@mariano-cucinotta]

You're great. Sepre helpful and always work out of the ordinary. Keep up the good work. Thanks

[@websquadron]

Thanks, will do!

[@roppor2194]

Imran, you have a great design. I guess I'm using this for my page.

[@websquadron]

Go for it :)

[@thierryrussodelattre]

Good idea! Thank you very much!

[@websquadron]

Glad you like it!

[@nosheensalman980]

I have a question if we have to put more widgets in the header, then how the scroll bar will appear?

[@websquadron]

It will appear if you have a lot, so be careful with content or Column Gap.

[@MichelleWolff11]

This is great!

[@websquadron]

It was done because someone sent a screenshot of the sidebar and wanted to know how to replicate in Elementor - so away I went :)

[@mythili9012]

Can you also show how to set the mobile responsive for the vertical header? It's probably not much. But curious to see how you go about it.

[@websquadron]

I would only show what’s needed for the mobile view or hide the sidebar and use an off canvas menu instead

[@mmyae]

Thanks for this video. I have a issue. I don't find the shortcode of the section. How cn I find it ? Thanks for your help.

[@websquadron]

Are you using Elementor Pro?

[@mmyae]

@@websquadron Sorry, but no, because you said that your method did not use any paid plugins. So... Elementor Pro is a must?

[@websquadron]

@@mmyae My cover art states Elementor Pro - and I'm referring to no other 3rd party tool because people end up using that.

[@mmyae]

@@websquadron OK, sorry for the inconvenience

[@mohsin0112]

Thanks for your help. Love this tutorial

[@anirudhramesh8207]

Hi Thanks for the video - just subbed. Do you need Elementor Pro for this?

[@websquadron]

You'll need templates from Elementor Pro.

[@mahmouddahma3165]

i have very important question for u can u make that fixed with ' also fixed header?

[@websquadron]

Yes as you’ll have fixed it to the side.

[@nicolamelli7960]

Hi Imran, I implemented your vertical header in one of my websites. I have a problem though, I need the background color of the vertical header to be initially transparent and then turn into white after scrolling 1px. Can you help me please?

[@websquadron]

Great :) Pop over and see this: kzbin.info/www/bejne/bnaQnZKVgZl_btE It shows how you can change the background colour. Tip is to make it empty from the get--go. No colour. No Transparent. Then in the CSS Code, you assign it to be Transparent and then add the code to make it turn White when you scroll 1px - and make sure that you set the Effects Onset inside the Motion Effects to be 1px.

[@nicolamelli7960]

@@websquadron thank you Imran. I tried, but the effects turns in immediately by itself and not when I scroll. Maybe because the header is vertical and fixed, it does not respond right to px as a normal horizontal header..? I just put in the custom css code of the content section: .elementor-sticky--effects { background: #ffffff!important; } and I set the effects offset to some values like 1 or 10, but it doesn't matter, the effect take place alone in a while without me doing anything.

[@websquadron]

@@nicolamelli7960 Have you added CSS to make the background be #ffffff00 (transparent) before the code you wrote there? Make sure the background is cleared, ie: nothing is assigned, not even transparent. Another way is to make the Header be Sticky to the Top, and set it to be VH 100.

[@nicolamelli7960]

@@websquadron thanks again for the answer Imran. I haven’t added no more css code that the previous that I told you. I haven’t assigned any color to the section, so it results transparent in the beginning. When I open the website the header appears transparent, but then in a while becomes white, independently by the scroll. Yes the section is 100vh. Imran if I can’t find the solution by myself, can you do it for me? I will pay you obviously

[@websquadron]

@@nicolamelli7960 Email me on [e-mail]

[@Dewabarasunderan]

Can I do this with the FREE version of Elementor?

[@websquadron]

You may need an alternate plugin for the header part. I recommend getting EL Pro.

[@Dewabarasunderan]

@@websquadron Elementor Pro is too expensive…

[@websquadron]

@@Dewabarasunderan I understand.

[@rakibhossain1816]

Can you help me make it collapsed

[@websquadron]

Collapsed as in it appears when you click a Pop-Up? You could add a button, and when you click that then the menu fades in downwards.

[@TheMrE1974]

just wasted over an hour to realize it doesn't work for table of contents as it's a separate page!! I knew I should have gone to bed 🙄🤣

[@websquadron]

Oh no :(

[@TheMrE1974]

@@websquadron good video though

[@deandrew8711]

I can only achieve this by giving my page section a negative margin or the page content is displayed below the header?

[@websquadron]

Did you follow the video fully as I didn’t get that issue

[@deandrew8711]

@@websquadron Yep, followed to the word but my page content starts below the side bar header.