Sticky Vertical Menu Elementor Pro Navigation v2

[@KayCinho]

Does your theme offer this type of navigation? Or would you rather do it with Elementor Pro?

[@ares2339]

always elementor

[@KayCinho]

Yeah, the possibilities are endless

[@matyasloffelmann7329]

Hello! I have completed the tutorial and I wanted to see how I did. Well I opened the home page and there is no header nor the sidebar menu. I do not understand, I did everything with you. It is however visible on other pages than my home page. Can you help me out? I tried to change the homepage to another one but now it isn’t showing not only on the new homepage but neither on the old one. What do I do? Please

[@martynadziarnowska7357]

@@matyasloffelmann7329 I have the same problem! Did you manage to find a solution?

[@Carmilaaa]

@@martynadziarnowska7357 I had the same problem, the way I fix it is super easy: In each page/post/product make sure you have selected DEFAULT TEMPLATE - not Elementor Canvas or Elementor Fullwidth -- You can find this option when your are editing your pages/posts, before you click the blue button "Edit with Elementor" Let me know if that fix it!

[@katlegoseanmahaye3309]

thank you for the update Alchemist, Iol l only realised like 40min in that there is an updated version. Your amazing man.

[@HandiworkMedia]

probably the best tutorial i've ever watched on any subject. clear. concise. Easy to follow. thank you so much! subbed.

[@miguelangelperez6513]

tus tutos son brutales!! 100% recomendable.

[@erinrosenthal3363]

This is fantastic, thank you! I appreciate you explaining WHY you have to do certain stuff. That makes this that much easier to follow.

[@KayCinho]

Glad it helped, Erin :)

[@webixpoint]

WOOOOW, your tutorial is awesome brother. It's smashing.🔥🔥🔥

[@linopierre6395]

Awesome tutorial! stunningly among the best not to say the best I have seen so far on Elementor Pro.

[@KayCinho]

Wow, thanks!

[@sarahrain4371]

Hey there, at which point do you see the menu on every page you created? I could see the footer and the header but i can't find the menu. Does the whole website need to be live to see the menu? A single page isn't enough? Or is there something i did wrong

[@PZaNETO]

from one hour to 30 minutes already helps a lot hahaha

[@KayCinho]

True! But then again, I still think it takes times to create good things.

[@Sarahbailey222]

Hey Guys. This was driving me nuts, because I was following the instructions exactly. If you are unable to locate your 'Post Content' widget here is why. When you create your Single Page Template do NOT choose ''Page" in the dropdown like he tells you to in this video. After choosing the 'single' tab, in the drop down menu choose the "single page" option, you will then find your 'post Content' widget once you are back in editing mode. I am still editing. So hopefully it works, but yeah at least I found the post content widget.

[@terupalacios3772]

Same!! Im searching the option

[@achemicalsoul]

i found the way its to be done in the newest version...you go to the hamburger menu (where global/site settings/view page etc are) whilst in elementor editing mode and select 'theme builder' - 'single page' and it appears there.

[@sarahrain4371]

Hey there i clicked on the single page but i don't understand why i can't see the menu on new pages i create even though i can see the header and the footer. Do i need to publish the whole site for it to show?

[@nicholasgillespie7081]

KayCinho!! The man! Top video!! Currently designing my website based on your first video; will update it with pleasure following this new video. Happy to see the sticky plugin dropped :) . Seriously, thanks! What you do is awesome

[@KayCinho]

Wow, thanks for taking the time to comment Nicholas! I'm glad it helps you with your project :) Take care and stay safe.

[@matsuno415]

Awesome tutorial! I've been stumped trying to figure out how to do these. As a WP newbie, I really appreciate you opening the door to new possibilities!

[@KayCinho]

You're very welcome :) And thanks for the kind words!

[@glencoe1266]

My god youtube tutorials are now stylized like a cinematic documentary. Dope tut thought, cheers!

[@KayCinho]

Thanks Glen, glad you enjoy it!

[@riazmahmudrobin]

I must say, explanation was top mark.

[@KayCinho]

Thanks Riaz, glad you enjoyed it!

[@adnanamin1843]

Have been following for a while now! It’s really great how you things together in a nice and easy way. Specially beginners and intermediates can cope with that pace. Thanks for creating these tuts and for your priceless efforts! 🌹

[@KayCinho]

Thank you so much for watching and for the feedback!

[@buntypanwar]

nicely done , used this on my live website, its amazing keep it up. please also need more tutorial on custom build ecommerce category page , product page and single page product with exacting feature in elementor pro.

[@KayCinho]

Thank you so much Bunty! Maybe in the future :)

[@brainsinister9422]

Great tutorial. Thanks so much for this Didn't know I could make my menu template. I was about installing a plugin for vertical menu

[@mrjaybanik]

amazing content sir.. love you your hardwork. i very appreciate of your work. and amazing really, i want to more more premium tutorial of the elementor in future. stay safe.

[@KayCinho]

Thank you for the kind words. Glad you enjoyed the content!

[@enayal368]

Thank you so much for your time and your effort .. you're the best .. 👍🏻

[@mervesanli316]

You're the god of elementor

[@KayCinho]

Wow! How do I answer to this :p Not a god, but a lover of great tools like Elementor and thrilled by the possibilities of this era. Thanks so much for the kind words and for taking the time to comment :)

[@e.raqueldamas]

Incredible bro! Thanks for the super help in my jorney with Elementor Pro.

[@KayCinho]

Hey thank you so much for your comment. Glad I was able to help :p

[@kugi518]

Great work, nice tutorial. CSS Code worked flawlessly for my project.

[@KayCinho]

Glad it helped!

[@joannemassey9933]

Brilliant tutorial, thank you so much!

[@KayCinho]

Glad it was helpful!

[@AnyTechyt]

Thanks so much, I have elementor pro, but for some reason the post content widget isn’t showing up? Why? 🤔

[@justintaylor5915]

Wonderful tutorial, very easy to follow! I just got Elementor and I needed to figure out how to make a vertical navigation for tablet and mobile mode. By default it only gives you a dropdown option and I was worried I'd have to settle for that default layout. This gave me everything I needed to know to build it. Thank you so much for your help!

[@KayCinho]

You're very welcome!

[@claykromberg3331]

This is a great tutorial. I have it working but would love to move it to the right side. So far I have been unsuccessful. I have the pop up on the right but once I add the CSS it pushes the sticky Nav bar to the left. I'll keep trying to figure it out but figured I would ask for help since it is probably and easy fix for someone that is more affluent in CSS

[@HuntersofLight]

Hi, thanks for the tutorial. I have a question about the navigation - it defaults to the hamburger icon. How can i force it to show the text? And, how do I open subsections underneath the sections instead of as flyouts to the side? Thank you. Q

[@a.w.8194]

Amazing tutorial!! Was very helpful and awesome website. Any idea on how to disable the menu from being sticky on the entire page?

[@uchenglife]

great tutorial!

[@KayCinho]

Thank you! Cheers!

[@JoaoRSilva.]

I can't find the "post content" widget :(

[@Sarahbailey222]

Neither

[@Kokolalune]

You must create a "Single page" now. Elementor has changed a bit

[@felipeenneto]

Awesome! Thanks from Brazil :D

[@KayCinho]

Glad you liked it!

[@lukejuan3764]

Great tutorial! I have some custom CCS set up for horizontal scrolling on my homepage which is stopping the navbar from appearing. I have scanned the code multiple times and can't seem to work out why the navbar will not appear on the homepage?

[@bigcobatv]

Thats nice, bro!

[@KayCinho]

Thanks! Glad you enjoyed the video :)

[@FrancescoAcciai]

Brilliant tutorial, very very clear. One of the best ever. Just a question: if I want to create a template for a single article on the WordPress blog how can I make this? I have done a new template only for articles but the mobile version had some problems with the padding o some parts of it. I think there is something duplicate somewhere, how can I solve it?

[@GiovanniPuocci]

Amazin Work! Thank you. :)

[@KayCinho]

Glad you like it!

[@sjdbfosuhfouehu3]

great video man, thanks!!

[@rubelgraphics7880]

love you you are brilliant

[@KayCinho]

Thank you so much for the kind words!

[@Am_ro12]

Amazing tutorial thank you - looks amazing but the bar only shows on the front end preview for me. Not when you select visit site. Cant understand why. Theme builder has changed a little bit since you made the video - de we select single post or single page? I have also cleared all my cache.

[@twelfth-man-academy]

I noticed that the version of elementor pro varies from one another in your videos, not sure if you customize it. One of the main problems I finde is when saving in themes templates tec, there are much more page/post/single/ etc etc types and for some reason is not exactly the same and it does not work... Then is also problems with Z Indexes How to debug these problems The tutorial is clear (Is a bit long because you add a lot of formating to the elements, useful to do the full work, but not as fast when we want to implement functionality and then the nicities on top...

[@KayCinho]

Hay thanks for the feedback. Just to make sure I understand correctly, would you prefer less customization and a more "to the point" style?

[@tballandras]

Thank you so much! This is so helpful!

[@3mediastudiodesign]

oh my god !!! this is a super content, i'm really impressed, best tutorials ever, i did it in 15 min. i'm doing all your tutorials... you are THE ALCHEMIST, i would like to support your work, how can i help ?? have u got any patreon account or a kickstater project ??? Thnak you very much for the stunning job. AAAA+++++

[@KayCinho]

Hay thank you so much!No patreon at the moment, but the best thank you you can give is to share the channel :) Thank you for taking the time to comment. Much much appreciated and I am thrilled the content has been of value to you :)

[@3mediastudiodesign]

@@KayCinho You are very welcome man, your tutorials are so fucused. I would like to know if is possible, could be very interesting, to set the background color of the vertical menu to transparent (black with 30% alpha), and use full width images in content .... any suggest ions ?? I Would like to mix the 2 different effects of your other tutorial "How To Create A Transparent Header Menu In Wordpress With Elementor Pro" but using a vertical menu instead with transparent effects. Thank you very much for your massive work.

[@achemicalsoul]

hi, i'm following the tutorial...however 'Post Content' is not available in your steps ( it is however by selecting 'single page')...has there been an update or something since this was uploaded?

[@ratanaknou1895]

Hello Kaychino, I followed your tutorial from the beginning. It works fine when I design in elementor preview. However, when I have saved and closed and check the final result. It is not working.

[@brianpham6630]

Hi KayCinho, another great tutorial, have you ever tried to make another popup come out from a trigger from that popup? For example if you had a services section in the side bar popup which branched out another sidebar popup from clicking an icon or text in the first popup? I've been playing around with it and even trying to use the Z-index but I'm still having no luck.

[@KayCinho]

Yes, that's exactly what I've done in this one: kzbin.info/www/bejne/p4O8cqN8jL-nqNk

[@saliclothing]

everything works for me until I try to save the menu on "all singular"... In the preview everything looks great but on the actual page it just shows the header I built previously

[@adanvite7308]

Always your videos, very well explained. Thank you, for answering my question in the previous tutorial, I am going to make the changes. Thank you @KayCinho -Digital alchemist

[@KayCinho]

You're welcome! And thank you for the kind words :)

[@MOwen405]

Hey KayCinho, Great Tutorial!! Question, For some reason, I can not get this Sticky Vertical Menu to display on my Blog and Shop (product archive page). Is there a different setting or do I need to not use the Blog, Shop default pages?

[@daniela2641]

Hi Kay! Thanks for the awesome tutorial. Just tried the Navigation on the right side, but your CSS Code s not working then... Always jumps to the left side - what can i write at "position: fixed" to fix the navigation menu on the right side?

[@KayCinho]

Thanks for watching Daniela! I haven't tried it on the right hand side, but first thing I would try is to add the following line under "position:fixed;" -> "right:0 !important;"

[@francoisalbert5605]

Hi, thank you for your tutorial. Just a question please, I'd like the popup menu disappears when I click a voice (I created a single scrolling website page). Please, how can I do it? Thank you!

[@funfunelas]

Hi! I'm not sure what I'm doing wrong, but whenever I add "my-header in the CSS Class for the Header, the section disappears entirely. :(

[@kyraw4369]

same issue! :(

[@olivervalverde9106]

Nice tutorial! I have a question. Why it’s not possible to keep the vertical sidebar menu on tablets and smartphones?

[@danielraphaelboes]

Like your videos

[@KayCinho]

Thanks Daniel - glad you enjoy the videos :)

[@amandasudowsky4302]

This is great! Thanks so much! I am having one issue, this works beautifully in my Single Page template, but when I apply that to all pages/front page, it will not show at all. I followed exactly, added in all the code, nothing will budge on my pages. I watched this video at least 5 times, maybe I missed something with all the moving parts. However the margin is there on my footer... LOL I am still new to elementor but not so new to web building. Any help would be appreciated!

[@XoliMaleko]

Hey Kay, thank you for a great tutorial, I followed your guide and managed to bring my project to life. May you kindly tell me what is that tool you use to test "Mobile" and "Table" modes?

[@KayCinho]

Glad it was helpful! Sure: I just use the inspector tool from the Google Chrome Browser. While in Chrome (or Firefox) right click on any element and select "Inspect" in the dropdown menu. Then you just need to activate responsive mode by clicking on the Mobile /Tablet icon in the top right corner of the window. Hope it helps :)

[@philvaive1161]

I've done everything, I have followed this video step by step probably four times, and it works just fine on the preview, but not when I look at my actual site. What is happening????

[@loomedai]

Can you add a link to the video that explains how to build the menu bits?

[@michaelhines5647]

KayCinho, nice tutorial. Question have you ever built a vertical headers in Elementor? it Seems like a great option the developers at Elementor should consider adding as a template option. what do you think?

[@morjhie]

Thank you! Please I have an important question: how do i edit the Woocommerce orders page of my website to suit the colors and style I want? Also, how can I edit the Woocommerce default button that says “no order has been made yet?”

[@codemilestone7697]

Please please please help its not working front-end I mean every pages

[@medoxhunter6699]

Hey it's great but when I scroll down on my phone the content of homepage is appearing for some while before it's disappear again

[@TSIXGaming]

ty!

[@ChristianAB]

Hi there! Amazing video! But I have question :) I found a problem, when there is a template widget in the page that have to be displayed in the "post content" widget, all the style desapears, do you know how can I keed the template style insdide the post content widget? Thanks!

[@surajojha2115]

first off, great video , it helped. Now my problem is my website is not responsive. when i load my website on mobile first time, it looks great i.e same as it looks in elementor page editor but when i hit refresh or reload, the page responsiveness breaks and inherits all the CSS from the desktop version which doesn't look good on mobile. Have you ever faced this problem?

[@Carmilaaa]

Hi, I love this tutorial but it went wrong somewhere. The sticky menu shows on pages but not on posts. I have added the condition of "all singular" and "all posts", still no luck, any tip?? Thanks for your time making these videos

[@Carmilaaa]

Ok, got it, I went to each post and edited Post Attributes from Elementor Canvas to DEFAULT TEMPLATE phew

[@hyperhostme]

for some reason it is only working when I have elementor open. When I try to see it on the page the sidebar won't show up

[@sergiobruno4813]

Such a a great tutorial! It's work perfectly for me excepting in woocommerce products archives and single product. It is just dissappear. How could I do? Thank you for your awesome video!

[@Scorpio_bruja]

RESOLVED. I'm stuck. I followed your instructions all the way up to creating a single page template. At 18:06, I looked for the post-content widget, only thing with content is the "table of contents" widget. So I couldn't find the widget you're referring to. On Elementor's website it says that's a "single-post" widget, not a single-page. So could that be why I'm not finding it? What should I do now? To anyone not finding the post-content widget, make sure you're using a "single single-page" template and not a "single page" template. When you dropdown the menu for your templates, you'll see both, choose the one that says "single-page." This was a flaw in their information architecture.

[@zerobambiro]

I have a little problem with showing my custom posts with the vertical menu. I made the conditions to all singular, but it just shows up in my pages, but as soon i click on a picture in my portfolio to show up the projectposts, it just disapears. Don't know what the problem is :/

[@lolleschaut]

Hey Kay! I really like your tutorials! I followed it some weeks ago and now i try to get a blog working on the same page. Could you give me some insight how to do that? I want to create a single post template for blog posts but it won't work together with the vertical navigation. Any hints? Thank you!!

[@Leoyardo]

Hi, 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 put in a double line, I would like it to be only in one line.

[@RPGstorm]

Hey KayCinho, we would love to use Elementor Pro for this type of menu, but how do you deal with the various adblockers preventing the popup menu from showing? I know I along with thousands of others would love to hear about a viable solution.

[@davidsonzed]

Hi KayCinho Thank you very much for the great tutorials. Can you show us how to use tab contents on mouse over? because almost all tabs are showing content when we click on the tab and also this makes a big issue on mobile. because every time when we click a tab on mobile it loads the page. so how can we solve that issue? Thank you

[@linus430]

Awesome tutorial! I have a problem completly unrelated to this. I have two objects in the same column but i want the lower one to be even further down and i tried doing this with margin but that also pushes the above object up. How would you aproach this. Do you have any video on the subject? Thanks!

[@Allan-eh2ey]

Great video! Although I’m having troubles making this header appear on WooCommerce pages. Do you know I can make this happen?

[@angelicasanchez5333]

Hello, I´m starting to edit and build my own web and I do love this menu, but even when I followed every single step the header is still there. In your video, when you put the CSS code that bar disappears but it doesn´t happen with mine. What could be the problem or what should I try? I find really easy to follow your tutorials but I don´t know what could have gone wrong.

[@queenbeemeditation]

my footer is only showing on the homepage not on the entire website.pleae help

[@thebabaevents1713]

Hello Coach i use elementor PRO, post content i am unable to find, how to do ?

[@marcovanderziel]

Thanks for this tutorial. I'm beginning to learn Elementor and I'm liking it. One thing; you set the left column to 5%. It is possible in Elementor to set the left column 's width in pixels? I don't like the vertical nav to change width size on desktop. Or is it only possible with some custom CSS?

[@KayCinho]

Glad it helped :) I'd have to check whether it's in the core, be you should be able to do it with pixels :) However, little tip, some addons allow to extend the core features, one of these (premium) addon is Piotnet aka PAFE.

[@AAlani-uz4gm]

Ohboii steroid for elementor has this and it's a free plugin

[@marcovanderziel]

@@AAlani-uz4gm Thanks for the info. It's crazy that this can only be done with a seperate plugin though. Hope this comes standard with Elementor (PRO) in the future.

[@1957dim]

Wonderful tutorial, very easy to follow! but i have a mobile responsive problems becose of the single page someone can help me please?

[@spike_kulu]

Thanks for the tutorial. It was exactly what I tried to do without any success. Work great for me, except for a custom post type (portfolio) I made with ACF for the content and the single "page" of the builder theme for the structure. So like in the tuto, when I choose to publish the vertical nav on "all singular", it applied all my website, except my custom post type page (portfolio), where the header (horizontal, responsive menu) is displayed. When I change the display condition, I could choose "portfolio", "portfolio category", so plus the "all singular", I choose these two. And then, when I display one of my portfolio, I have my vertical nav and no more the horizontal, but I don't have the structure or the portfolio content anymore. I have only the content text part, like in a text block. Any idea ? I suppose it is because the vertical nav like my portfolio custom post type are "single" model/structure page... Thanks in advance.

[@tayorain6554]

sir im stuck i cant find post content in edit section maybe beause im using newer version of elementor what should i do now help me ?

[@nicolasbavamusic]

Hi! I've done everything, and how can i add more content then ? i don't know how to make all the page, and keep everything as i wish.

[@nicolasbavamusic]

when i put a block or anything its appear in one column, and the nav bar is over the content, and that's not the idea. so, i would like to know how i add all the content in the page. thank you

[@juan07241981]

Maestro,,, muchas gracias por tu conocimiento

[@KayCinho]

De nada i amigo :)

[@goreblimey]

Hey great tut, but how does this apply to the latest version of Elementor? i.e there is no "Single" option for templates so you don't get the post content widget. The only way around this was to rollback Elementot to V2.9.8

[@nicholasgillespie7081]

Hello KayCinho! Thanks for a great video!! Quick question; what is the purpose to hide the overflow within the .my-vertical-nav {overflow:hidden!important;} code? I ask because it has as an effect to hide the shadow i'm trying to apply to the right side of the vertical 5% column. Thanks again!

[@tomstevens5490]

how do I get the nav bar to be on the right instead of the left?

[@sarahrain4371]

The css code disturbs the responsive mode.... how can i fix that please

[@Oigomezaqui]

Hello, I had a problem, on some screen sizes the setting of 5% still continues, even changing the column size to 100% on tablet and smartphone

[@enmguy1217]

This is excellent, thank you. How would you do this without eliminating the header. Like have it when you scroll down, it then becomes stickied but it stops below the header.

[@KayCinho]

It would require some javascript, but I'm not sure it would be good in terms of UX

[@magicalmusicmashups6388]

I followed the tutorial but the vertical nav just does not want to show up on my site? Please help!

[@QuintinMills]

This is great, i am using it for my new website. I have one issue though - the footer appears in the center (Vertically) and not at the bottom below the content. On shorter pages that is fine, but on longer pages, it is right in the middle of the content. Not sure what i have done wrong.

[@francoisalbert5605]

Really nice tutorial, thank you! Just a question, please: how do you make the animation of the popup a bit slower?

[@matchelo3]

Show de bola! Parabéns!

[@KayCinho]

:)

[@lolleschaut]

Hey KayCinho, thank you very much for this tutorial, it's really helpful. Would you be so kind and link the tutorials you mentioned in the video in the description? Especially the one for (mobile) Header and Footer creation, I was not able to find the one in your videos. Thanks and keep up the good work! :)

[@bevoy-welzijnsbos937]

Great video! I've already learned a lot through your video's! I will highly recommend your videos to other people. A quick question: When showing the vertical navigation on certain pages, it seems to affect the spacing. There is less spacing between eg. "a title block and a content block" in comparison to a page without the vertical navigation. Do you have any idea why this is happening? Thanks in advance.

[@cateyes8588]

Hi! I’m really struggling with this and have a very basic question. Does this work with the hello theme? I don’t completely understand how themes and elementor relate to each other. What other themes work for this aside from the one you used? Thank you!

[@sarahrain4371]

Were you successful in making it work with the hello theme?

[@andreygonyaev724]

Awesome tutorial! I've just made the menu as designed with no code, thank you! But the only one thing - I need this pop-up (actually I have not one, but five popups) to be displayed not on click, but on hover. Any way to do this? Thank you :)

[@KayCinho]

Thanks for watching! Try this: elementorcodes.com/elementor-hover-popup/

[@khachieunguyen9339]

Thank you very much 😍 !!!!!!!

[@KayCinho]

You're welcome 😊

[@temimhammadi6684]

Hi ! Than you for this amazing tutorial ! 😊 Is there someone who could help me figuring out why the side menu won't show in a single post page? Thank you

[@alanalinatlantis]

do you have some update to live version of elementor

[@doctormubeen4575]

MashaaALLAH!!Aameen!!😍🤲🤲🤲🤲🤲🤲🤲🤲🙏