Elementor - Fixed Sidebar Vertical Menu/Header with NO code
HTML-код
- Опубликовано: 11 ноя 2021
- Add a Fixed Sidebar to your Elementor Website without using any CSS or JS or any Plugins.
The Sidebar could contain your Menu and other information and always be present even when you scroll.
Music used:
Track: Will You Be Mine (Remix)
Free download: brokeinsummer.com/will-you-be...
Artists: brokeinsummer.com
Contact: brokeinsummer.com/help
Music provided by Audio Library Plus
- Get Elementor Pro here --- elementor.com/?ref=25741
-- Of course, we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)
-- Book an Appointment/Consultation: calendly.com/info-28542
-- LinkedIn: / imran-siddiq-7320a74a
-- Instagram: / batswebsitedesign
-- Twitter: / imranwebsites
-- Facebook: / websquadrontraining
PS: websquadron.co.uk
PPS: Contact us at info@websquadron.co.uk
PPPS: We only build with Elementor Pro 
Хобби
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.
Fantastic!
You're great. Sepre helpful and always work out of the ordinary.
Keep up the good work.
Thanks
Thanks, will do!
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!
Awesome to hear this :)
Imran, you have a great design. I guess I'm using this for my page.
Go for it :)
Good idea! Thank you very much!
Glad you like it!
This is great!
It was done because someone sent a screenshot of the sidebar and wanted to know how to replicate in Elementor - so away I went :)
Thanks for your help. Love this tutorial
Hi Thanks for the video - just subbed. Do you need Elementor Pro for this?
You'll need templates from Elementor Pro.
I have a question if we have to put more widgets in the header, then how the scroll bar will appear?
It will appear if you have a lot, so be careful with content or Column Gap.
i have very important question for u can u make that fixed with ' also fixed header?
Yes as you’ll have fixed it to the side.
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.
I would only show what’s needed for the mobile view or hide the sidebar and use an off canvas menu instead
I can only achieve this by giving my page section a negative margin or the page content is displayed below the header?
Did you follow the video fully as I didn’t get that issue
@@websquadron Yep, followed to the word but my page content starts below the side bar header.
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.
Are you using Elementor Pro?
@@websquadron Sorry, but no, because you said that your method did not use any paid plugins. So... Elementor Pro is a must?
@@mmyae My cover art states Elementor Pro - and I'm referring to no other 3rd party tool because people end up using that.
@@websquadron OK, sorry for the inconvenience
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?
Great :) Pop over and see this: ruclips.net/video/8E-l__L4L8o/видео.html
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.
@@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.
@@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.
@@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
@@nicolamelli7960 Email me on info@websquadron.co.uk
Can I do this with the FREE version of Elementor?
You may need an alternate plugin for the header part. I recommend getting EL Pro.
@@websquadron Elementor Pro is too expensive…
@@Dewabarasunderan I understand.
Can you help me make it collapsed
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.
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 🙄🤣
Oh no :(
@@websquadron good video though