Sticky Vertical Menu Elementor Pro
HTML-код
- Опубликовано: 29 сен 2021
- Sticky Vertical Menu Elementor Pro tutorial today! Built with : kaycinho.com/elementorpro (affililate).
In my previous video, I showed you how to build a gorgeous horizontally scrolling website, and in that tutorial I told you I would show you how to build the sticky vertical menu that opens up a fullscreen menu.
Well the day has come! I hope you'll enjoy this one :)
CODE / BLOG POST:
kaycinho.com/sticky-vertical-...
MENTIONED TUTORIALS:
Horizontal Scrolling: • Horizontal Scroll Elem...
Custom Mouse Cursor: • Custom Mouse Cursor We...
Inverted Custom Mouse Cursor: • Custom Cursor Elemento...
TOOLS I LOVE:
- Elementor Pro (affiliate): kaycinho.com/elementorpro
- Astra Pro (affiliate): kaycinho.com/astra
- Crocoblock (affiliate): kaycinho.com/crocoblock
- Wirementor (my own tool): kaycinho.com/wirementor
MORE LINKS:
- Wirementor demo (built by me): kaycinho.com/wirementordemo
- A2 Hosting (affiliate): kaycinho.com/a2hosting
ONE PAGE WEBSITE FREE COURSE
• Elementor Pro Tutorial...
GET MY HELP:
kaycinho.com/shop/consulting/
ALL MY RECOMMENDED RESOURCES:
kaycinho.com/resources/
DOWNLOAD MY FREE BRAND GUIDELINES TEMPLATE
kaycinho.com/brandingtemplate
DISCLAIMER: I often review / link to products & services that I love and think you may find of interest. When you purchase a product/service through one of my link, I receive a commission, which helps me producing free content (you don’t pay anything extra!).
Also, I am the creator of Wirementor.
#webdesign #freelancing #elementor
Make your website scrolling horizontally: ruclips.net/video/AKyMQB9mABA/видео.html
Thank you very much for your detailed and well-prepared explanation of the vertical menu in Elementor Pro. Thumbs up! 👍
I love your tutorials! Awesome content for all of us! Congrats
Glad you like them Siscu! Thanks for sticking around :)
I love you Kay, thanks for the tutorial ! Keep them going :)
Thank you so much, glad you enjoy the vids 😊
Great Tutorial. Thanks for your time making it 👍🏼
Great job man, keep up the good work !
I am so inspired by your video. I use this amazing looking popup for my clietns and they love it !!
Hey thank you so much for your comment. I'm glad the tutorial helped :)
Cool Tutorial Kay. Thinking of using some of this on a new project.
Tip if anyone needs additional space on the mobile header for let's say company name next to logo
Set col1 to 90% and col2 to 10%. Both columns align vertically middle. Set Griplines element to positioning inline (auto).
Then select col2 and set Horizontal align to end. Voila! :) You know have 90% space on the left
I used inline positioning on the Logo too (about 50px for a circle logo I used ) and inline positioning on the heading next to the logo too with 6px padding to the left.
Hope this helps.
Thanks again!
This video is absolutely stunning and deserves way more attention! You've done such an amazing job, thank you so much for this tutorial. I have some trouble concerning the breakpoints tablet to mobile. There's a range from tablet upright (i guess) to mobile, with no nav menu showing. Neither desktop nore mobile. Do you have an idea how i can fix that? Maybe change the breakpoints or add custom breakpoints?
Just started and I already know this is gonna be awesome.
Thank you so much for always watching! Much appreciated :)
Hello did you make it work?
@@sarahrain4371- I haven't tried it on a project just yet.
You are the king. Period.
Honestly you are the best! Thank you so much
Wow thank you so much for the kind words!
Thanks for sharing, been inspire me alot with the design.
My pleasure 🙏
Love your content so much
Love this and just followed the instructions. Thanks so much. One question though. Since this is a pop-up, what if someone has a pop-up blocker installed/enabled?
Kaycinho, could you please show us how you did that scroll to navigate mouse pointer, i love it :D
thanks man, congratulations!
Hello Kaycinho,
Your tutorials are absolutely brilliant and well explained.
I love using your tutorials and they are really helpful.
In this tutorial I can't explain one thing, why are my social media icons shown larger in the vertical popup and in the desired size in the popup FS menu. I can't figure it out, I've tried everything. I can also click on the icons in the pop-up vertical.
thank you in advance
Thank you Again :)
Hi Kaycinho, I like your videos, I want to know how I can change the background color menu for diferent sections on horizontal scrolling? thanx a lot
Hi Kaycinho! Thank you so much for this tutorial! I'm really loving your channel, man! Oke, so I can reproduce what you did in this video. The only issue I have is that when I click the menu Icon, the menu popup loads, but it also resets the page to the top. So if I scroll down on a page and click on the hamburger menu, the menu opens, but the page jumps back to the top - which is super annoying if you navigate a site with a tall homepage, for example... What can I do about that?
I got this working great, thanks for the tutorial!
I have one slight issue though where one of my sections in elementor when using the "depictor" slider widget is appearing over the top of my sticky vertical menu, only this section. None of the others are, do you know why this might be? Or what I can change in the menu settings/template to make this appear on top? thanks!
Hi, Kaycinho! Thanks for your tutorial. Could you update us on how to create this menu using containers? For some reason, my Elementor only displays containers, not sections, and I need help to get the same results. I used to have the sections by default and then the option to turn them into a container, but now it seems to have disappeared. And my containers for desktop and tablet are stuck to the left.
Liked, commented and subscribe. Great video! I don't have a portfolio yet but will be using this type of menu for my first client. Going to go through some of your other videos to get some ideas for laying out content. Hoping to see some videos on handing finished products to clients as well.
Were you successful in making the vertical fixed menu?
This is great, if I wanted sub pages on the menu... how can I make it so it's it's own pop-up when you tap on the drop down? Or is that even possible?
This is so smart! U opened me the inspiration with this! But I have an uncommon problem, the popups can only be opened by logged users and not logged the link (button) never appears. Do u know what could be the reason this is happening?
Does this work with the new container update in elementor ? I tried it and when i hover over the Header (while viewing the site) there appears a scroll bar in the header (height is set to 100vh)
Great tutorial as always! Thank you! Have repeat this on my demo site (with horizontal scrolling) and links in menu linked to anchors on page. Sooooo, links works on Chrome on macos, but didn’t work in Safari :// Did you notice that? And if yes, how you fight with it? Thanks
Did you try to use locomotive scroll for better scrolling?
I need you help. Im building a landing page using your tutorial. But i have some problems with the menu. For example, i need that menu move to "sections" into my page. Im using CSS ID in the menu but not working.
Great tutorial, I have a problem, when I Finish the tutorial my social icons increase the sizes and i can't fix it, even if I reduce the size. Any idea about How can I solve this?
I am having the same problem, did you find a solution?
@@xenophonvenios No bro, no solution or any response, if you got a solution please comment here.
How can I get more space horizontally, I finished the header but in my case the logo is too little, hard to see in the menu. Can someone help me ?
The css code disturbs the presentation of the responsive mode. How can I fix that please
Tks!!
thank you Mister the best of the best
Thank you for the kind words Hervé!
A great tutorial, especially if it is combined with the horizontal scroll, but when it is a mobile version, how do I make it have a normal footer. Thanks again and best regards.
Hello. Did you use try this tutorial? And did it work?
Hi mate, very nice videos. I learn a lot out of it. But when it comes to the links in the added menu, how did you manage to bind each link to the slide? I have added anker to each slide "section" but still not working.
Hi, were you able to make the vertical menu for all of your website?
so the left sticky vertical menu header is basically a popup?
Somehow the logo doesnt appear on the sidebar after publishing, does anyone potentially know why?
Fiyah! Curious if we could purchase this whole amazing site from you bro?!$
Hi, this method does not work inside the Shop page that I created with Woolentor or the default shop page from Woocommerce. It is a shame...
Thank you for the video! :) But from some reason the mobile header doesn’t work... :/
thank you for the tutorial, i have another problem the pop up doesn't"t always show its content I don't know why. How do I solve this problem?
I solved this.
Idk why the popup doesn't always show its content on tablet and mobile. So i used another menu from the plugin header and footer builder. And it worked
Awesone Tutorial!!! I must be doing something wrong. It's all working on my laptop in all sizes (PC, tablet and Mobile, when I resize my browser) but for some reason, I don't get the popup on a real mobile...
Ok got it to work. If in your optimization you Defer Render-blocking JavaScript, the popup won't pop on mobile for some reason... FYI to anybody who gets this issue.
I got this issue so i had used a normal menu on mobile and tablet that doesn't require a popup
I noticed that the css code used in this tutorial disturbed the presentation of the responsive mode. Any idea about that please ?
I am having 2 problems, can someone help me? The social icons become larger and unclickable on the sidebar and there is no close button on mobile devices.
I have created my horizontal scrolling site and added the vertical Menu. Then I have tried to link the Menu items to the the relevant slides using ID links. I was unsuccessful. Tried using Anchors, it did not work either. Do you have a tutorial ? Thanks
I tried but finally I choose another plugin, this menu doesn't close on the click and doesn't even scroll to your section if you are using horizontal layout.... And even if you add some JS the menu is buggy
Hello, i was able to finish the tutorial but i don't understand why I can't see my menu on the new pages i create just like the header and footer
So i figured it out. you should go to the *page's settings* and instead of elementor canvas choose *theme*
Yes but the nav doesn't closes on clicking on a menu item....
Do i need to manually add the menu for every page i create?
No. But you need to change each page's theme to the theme you are using. In his case astra theme
nice.
why dont we use "Hello Elementor" theme? to skip the empty header/footer step
Your new subscriber 😃
Welcome!
Hello, maybe you can help me, I have a problem with the submenu, I don't know how to edit the space of each option, the space is small and the options are double-lined, I would like it to be only on one line.
Hello, were you successful in doing that?
Yes you need to custom css to it . line-height: ????% don't forget !important to it
my class is .elementor-???? .elementor-element.elementor-element-????? .elementor-nav-menu--dropdown a
I don't know what I'm doing wrong. I've now watched the full video and completed each step one by one multiple times, but my verticle menu icon will not work and will not open my pop up window? I click to find the popup, find it, then click on the wrench and type in the correct FS popup and select it, then publish, yet, when I'm on my live screen, it doesn't work? Any suggestions would be much appreciated. Thank you!
Samething here. Works on my laptop perfectly when I change my browser to adapt to PC, Tablet and Mobile but when opening the page on a real mobile, the popup doesn't pop.
Same here. I couldn't. Make the menu show on my website. Did you find the solution?
@@sarahrain4371 If in your optimization you Defer Render-blocking JavaScript, the popup won't pop on mobile for some reason... FYI to anybody who gets this issue.
Ok got it to work. If in your optimization you Defer Render-blocking JavaScript, the popup won't pop on mobile for some reason... FYI to anybody who gets this issue.
Hi, I love your videos and thank you for them.
I don't understand why but when I try to make this vertical menu I always have a vertical and horizontal scrollbar what I am not able to hide or remove or anything. Does anybody have any idea what should I do to solve this problem? Thanks in advance.
Hi, were you able to solve the problem?
@@sarahrain4371 Hi, I needed to play with the margins in negative if I remember well.
@@mark.benkovits i wasn't able to pin the menu so it could be displayed on every page of the website. Do i need to add it everytime i create a page?
@@sarahrain4371 It's a popup. When you create the popup you're able to set up the availability conditions so you can add the "entire site" rule to appear it every single page what you've ever created.
followed step by step twice and i cant get the mobile header to show
Hello Kaycinho, pretty nice videos, learn much from them and I really appreacietaed.
Can you make video about using HTML&CSS&JS animations from CODEPEN? I learn how to use html&css from your videos, but everytime I am adding js. it doesn't work.. I'll hope you response and show that to ppl and of course help me :D
have a nice day bro
Bro, this is so bad ass 🔥🔥🔥, how much do you charge? Hmu
Thanks man! Charge for what?
@@KayCinho charge to do this for clients? Also, im having some issues with this, im following your video but for some reason the titles im giving my pages are showing up on the page and I can't for the life of me figure out how to not let that happen 🤔🤷♂️. If needed I can send a screen shot 😅
would be great to have a sticky vertical menu that you could place anywhere instead of the type that takes up the entire left side of the screen...
Hi i wasn't able to make the vertical menu show on every page of my website. Any idea how to do that?
@@sarahrain4371 I'm using Wix now, love it
I dislike this video because of the hug number of zooms, I get strong pain in my eyes and head because of your video.. 👎👎
First of all, you are great!
I'm watching every video to learn about elementor with you.
But how can I use this menu on horizontal scrolling menu? I tried but I can't make it sticky while I scroll horizontal. Thanks!
Were you successful in making it for the horizontal scroll?
@@sarahrain4371 Yes. But it's just a one page web
@@Nono-cd7wg so i need to manually add it for every page i create?