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 :)
@nosheensalman9802 жыл бұрын
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.
@websquadron2 жыл бұрын
Fantastic!
@mariano-cucinotta2 жыл бұрын
You're great. Sepre helpful and always work out of the ordinary. Keep up the good work. Thanks
@websquadron2 жыл бұрын
Thanks, will do!
@roppor21943 жыл бұрын
Imran, you have a great design. I guess I'm using this for my page.
@websquadron3 жыл бұрын
Go for it :)
@thierryrussodelattre2 жыл бұрын
Good idea! Thank you very much!
@websquadron2 жыл бұрын
Glad you like it!
@nosheensalman9802 жыл бұрын
I have a question if we have to put more widgets in the header, then how the scroll bar will appear?
@websquadron2 жыл бұрын
It will appear if you have a lot, so be careful with content or Column Gap.
@MichelleWolff112 жыл бұрын
This is great!
@websquadron2 жыл бұрын
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
@anirudhramesh82072 жыл бұрын
Hi Thanks for the video - just subbed. Do you need Elementor Pro for this?
@websquadron2 жыл бұрын
You'll need templates from Elementor Pro.
@mahmouddahma31652 жыл бұрын
i have very important question for u can u make that fixed with ' also fixed header?
@websquadron2 жыл бұрын
Yes as you’ll have fixed it to the side.
@nicolamelli79602 жыл бұрын
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?
@websquadron2 жыл бұрын
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.
@nicolamelli79602 жыл бұрын
@@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.
@websquadron2 жыл бұрын
@@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.
@nicolamelli79602 жыл бұрын
@@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
@websquadron2 жыл бұрын
@@nicolamelli7960 Email me on info@websquadron.co.uk
@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.
@rakibhossain18162 жыл бұрын
Can you help me make it collapsed
@websquadron2 жыл бұрын
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.
@TheMrE19748 ай бұрын
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 🙄🤣
@websquadron8 ай бұрын
Oh no :(
@TheMrE19748 ай бұрын
@@websquadron good video though
@deandrew87112 жыл бұрын
I can only achieve this by giving my page section a negative margin or the page content is displayed below the header?
@websquadron2 жыл бұрын
Did you follow the video fully as I didn’t get that issue
@deandrew87112 жыл бұрын
@@websquadron Yep, followed to the word but my page content starts below the side bar header.