How to Add A Sidebar Menu with Elementor - 2022

[@salakhundov5746]

I searched long and hard, opened a ticket with Elementor guys, and whatever I found before this video tutorial was falling short of the complete solution. Kudos to the WPGuru for laying it out in full detail. The next step after this would be creating similar templates for your posts (unless you set the display conditions not to Singles > Pages, but to All Singles) and to your archives. And then you are done. Liked and subscribed.

[@wordpressguru24]

Glad that the video helped you. :)

[@mdrajuhossain2637]

Excellent, keep it up

[@danielgandara5719]

Hey, thanks for this tutorial! this is exactly what I was looking for!

[@wordpressguru24]

You are welcome. :)

[@enoivel1830]

I love this tutorial, you made my day. All I can say is Thank you, Thank you and Thank you.

[@wordpressguru24]

You are welcome, please do Subscribe as well, I will be making more related videos. :)

[@beinginsightful_for_peace]

Great...Thanks.

[@RavenRaver]

Thank you so much! Great tutorial! I just subscribed to your channel!

[@thechamp2585]

Spent 2 days looking for this.

[@arnabbhuiyan2923]

After a lot of trouble i finally followed your video and it worked out very easily, its really great thank you.

[@french3286]

idk you ... but youre the best. Thank you so much

[@debdulal2840]

thank you . hope you will upload more video about elementor

[@thechamp2585]

You are my hero right now.

[@tim_nextvolleyball]

Boom! Happy client thanks!

[@wordpressguru24]

Glad it helped. :)

[@lestudio4033]

Thank you very much ! very easy to understand

[@zaharacreative]

A GREAT FIRST VIDEO. THANKS FOR THE LESSON.

[@EmmanuelESulai]

Exactly what I was searching tirelessly for. Thanks

[@wordpressguru24]

Glad it helped you. :)

[@krcvandenboorn7077]

Superb tutorial. Exactly what I was looking for

[@MyMooCowz1]

Exactly what I was looking for. Thank you :)

[@jmmpptd]

Thanks for the video, helped me a lot !

[@sagarkumaryt]

I was looking for this kind of video for a long time. Thanks a lot.

[@wordpressguru24]

Glad it was helpful!

[@leticiafernandes4241]

Thank you!

[@obedhervieux895]

je vous remercie infiniment pour votre tuto, vraiment merci

[@iwbowden]

Well-done tutorial! Thank you for taking the time to make this.

[@wordpressguru24]

You are welcome. :)

[@johnnyhov2509]

Thanks for a great guide! Seems like I am not able to add it to my Woocommerce product pages fro conditions. Must I create it using a different type than single page template?

[@rg-web-design]

Thanks for this. It is best to mention an extra plugin requirement in your description. So in this case, the Sticky Everything plugin.

[@zerobambiro]

Elementor can do sticky content now on its own

[@IOmusic-pk8un]

Amazing , you are a master, thanks for preparing this video!!

[@wordpressguru24]

You're welcome, Glad it was helpful!

[@gream666]

Sir how do you apply it if you already have pages and just want the sidebar to replace my navigation?

[@Saroj12370]

Thanks. I really appreciate your video. It has helped me.

[@fabriziogatti5064]

Very useful tutorial Thankyou!!!!!

[@wordpressguru24]

You're welcome, Glad it was helpful!

[@rayhanrana6773]

just awesome.

[@kkthakur28]

love it. thanks for sharing your knowledse

[@cameronkeim8758]

Thank You for this tutorial. I made sure to subscribe. I like how you are very thorough and explain everything without shortcuts. Nice job! Hope to see some more tutorials from you

[@wordpressguru24]

You're welcome, happy to know that the tutorial helped you, and yes I will be making more tutorials soon. :)

[@mrtpofx]

well explained. but how can i add this custom nav menu template in the horizontal Main header's navigation button. You know what I mean? as I wanted... when I will select a bar button this whole navigation will appear. !

[@markpeters9382]

Thank you for this tutorial, very complete!

[@wordpressguru24]

You're welcome. :)

[@zcrscej]

Exactly what I needed, very well thought out video. Audio track was a little low but this is an EXCELLENT video. FIVE * * * * * (stars!)

[@711chandan]

Thank you for this....Great going ...hoping for more wordpress videos

[@wordpressguru24]

You are welcome. Making the next video soon. :)

[@chestnutmaremarketing8150]

Thank you! Exactly what I needed!

[@libra0670]

thanks. very nice!

[@mrnintendkid]

thank you :)

[@joaoscardovelli1662]

Well-done!!!!!! tkss!

[@GoTechUG]

Awesome tutorial bro.. Thank you..

[@wordpressguru24]

You are welcome. :)

[@toniwalshe1012]

Thank you so much for this tutorial... BRILLIANT!

[@fredmorpeth6250]

Brilliant! Thank you !

[@anngene5753]

Thank you so much! Do you know how to set the side menu as a fixed length? Every time I change the size of the browser window, the vertical menu gets stretched horizontally to almost full screen size and doesn't revert back until I refresh the page. Hope you can help

[@enioluwaodunjo]

Thanks alot man. This was super helpful

[@wordpressguru24]

You are welcome, I am glad the tutorial helped you. :)

[@chengshan4239]

its useful , thanks

[@fawadhasan6482]

first-time vertical menu with elementor, detail and a good way of designing a vertical menu

[@wordpressguru24]

Thanks. :)

[@sarafathima8132]

Amazing....keep it up

[@ekikoo]

Hi, thanks for the tutorial! I have a small problem when I resize my browser window to tablet/mobile width and then back to desktop width; this breaks the design and the page content is partly under the left column. Also the left column width is often something else than what I have assigned. Anyone else seeing this? Thanks!

[@azsmall23]

Agree - when you resize the window, stuff happens :(

[@nicholasgillespie7081]

Hello Ekikoo, have you found a solution for this issue? I am experiencing the same problem..

[@nicholasgillespie7081]

@@azsmall23 Hello, have you found a solution for this issue? I am experiencing the same problem..

[@azsmall23]

@@nicholasgillespie7081 I had to find another solution and do some custom stuff to make it work. I'm surprised the Elementor Library doesn't have a template to work off of already, but it's also not my favorite layout (I only do it if a client requests it). I can send you my template files if you want to work off of that.

[@nicholasgillespie7081]

Hi Ekikoo, thanks for the reply. I seem to have found a solution; easy too. Input in Sticky Anything plugin max width dimensions for effect... Crazy simple but overlooked it. Seems to have sorted the issue.

[@JingMingLi]

If I add a header, the sidebar is beneath the header but it is still stickied, so when I scroll down, the side bar will move to the top to cover the left side of the header. So the sidebar is moving on the first scroll. How can I fix this? Exmaple: You have a 100px header. Where it says "WP GURU" (with the logo), it's 100 px lower. When you scroll down, the sidebar goes up 100px and stays there until you scroll all the way back up.

[@kennethodea6337]

I exeprience the same issue. When I check the live site it is a fixed an correct sticky left column with the menu. But when I scroll down the left column with its content "jumps" to the top left corner. If I have sections/content in the right column where the post content is and you have to scroll down to see what ever the content is this "jumping" happens.

[@Романыч333]

Super!

[@sashglam5574]

Thank you for that but I have a serious problem: When I insert the "Post Content" then elementor shows me the same side menu again... I have a double menu then... help me...

[@abrardailylife]

I was searching this method for a long times after very patient you only one helpes me doing this great tutorials! I need to know a little matter that's I see that you take 2 column one of theme for side menu and another for post content my question is if I want to design my static home page in the post content column then is it possible?if possible how? Thanks

[@wordpressguru24]

The "Post Content" Widget actually gives you the option of adding the content into the pages, meaning after you make all of Sticky Menu as in the Video, when you will set the Homepage to Default Template and then you edit it with elementor, then you will be able to make your required page with elementor.

[@douglasenglish3306]

great job

[@amolsarker]

Thanks, man you saved me!

[@zerobambiro]

If i work with templates this doesnt work. I can't set up the conditions of the "Single Page Template" to the Entire site. So some content shows up in the column and some is loading without it.

[@nazrulopu1011]

Really informative and helpful tutorial. Thanks a lot 👍😊

[@wordpressguru24]

You're welcome. :)

[@FernandoCividanis]

Muito simples, parabéns pelo video!

[@Debabrata-j7e]

will this appear in all page or only edited page...

[@tariqueraza7799]

Hey, Is it possible on an ocean-wp theme STICKY SIDEBAR / VERTICAL MENU?

[@NorlynCodes]

Hi! I am using Elementor pro and there's no post content. What can I use instead?

[@afikzehavi9318]

Thx for the great tutorial, after publishing I still cant see it on my site after refreshing? why is that?

[@wordpressguru24]

Your Homepage should be set to the "Default Template"

[@alexcesar5358]

excelente

[@ronymia1471]

great

[@matteovelicogna7948]

Cool! but what about the footer? can i make a traditional one on my site if i use a vertical side menu? Cause i'm trying but the menu goes over the footer when i scroll till the end of the pages.

[@wordpressguru24]

In this kind of Vertical Header, we cannot have space for the Footer, and even if we make one, then it will not look good.

[@nidashah8999]

Thank you Sir, but now we have a builtin sticky option in elementor we dont need any extra plugin

[@daniarana9055]

nav menu is a pro feature. What do we do if we dont have the pro version of elementor?

[@Alex-xl3nx]

Lifesaver

[@debabratakandi3209]

is this will appear on all page...?

[@fahadbinsalahuddin4244]

Nice one. Keep making these.

[@wordpressguru24]

Thanks. :)

[@sameer6079]

For me the side menu does not stick to the page. It scrolls with the page. I guess you didn't particularly do anything to keep it fixed on the screen either. However I also selected fit to screen, full width, no gap and stretch column position. Could you please tell me where am I lacking?

[@wordpressguru24]

Did you install the Plugin i mentioned in the video to make it sticky?

[@余欣怡-o7d]

Hey, I loved your video! But the question is, my elementor is not a pro one, is there any other method for me to fix the little problem as you mentioned by adjusting the custom css? Since the custom css of elementor free version isn't available D:

[@wordpressguru24]

You can add the Custom CSS in your Theme Customizer by going into Appearance and then "Customize".

[@deviralworld]

r u there i need help when i insert post content it shows post which we are trying to make vertical menu plz help how to remove it

[@coding_my_futur33]

Same here, did you find a solution? :)

[@coding_my_futur33]

​ @WordPress Guru i have the same problem, when i add the post content to the right it adds my newly created sidebar menu, so i have my sidebar menu and then right next to it in the post content area there is one more identical sidebar... I did everything you did in the video!

[@eliaskhan220]

Thanks

[@wordpressguru24]

You're welcome, Glad it was helpful!

[@Piratequeen010156]

When I go to make the template there is no option for "single" it only lists Page and Section D=

[@wordpressguru24]

I made an updated video you can check it out. kzbin.info/www/bejne/eXPZcmSvgN6mb9k

[@Gelato-Vivo]

hi thanks, i dont have the nav menu , it is only for elementor pro? how can install-get this widget ?

[@scopes321]

Hi! When you add a sub-page, does the menu show a sub-menu? I tried it but it seems to hide under the content part. Do you have a solution?

[@wordpressguru24]

Use a Vertical Menu.

[@scopes321]

@@wordpressguru24 That's my point. I'm using the Vertical Menu in left side of page. The sub menu item is not visible. Seems hidden behind the content section (right side of page).

[@rodrigodelpino5531]

i dont find post content. its from elementor pro? i have the 2.9.4 version

[@tsedaltube6616]

I can not find the post content addon?

[@jimmyvu226]

very nice tutorial with working menu but all of my page seem to get static homepage image and every of my content seem to go under. dont know where i get it wrong

[@123kingvlad]

After all of that, i'll just create individual pages with their own content and set the page link to the side menu, right?

[@wordpressguru24]

No, you will need to set the Template for the pages to be "Default Template" in order to show the Vertical Menu to those pages as well.

[@aligrim3027]

Thanks for this

[@wordpressguru24]

You are welcome. :)

[@sarahrain4371]

I can't add a footer at the wnd of the page with this menu Help pleaasee

[@muzykoterapiazsercem30]

IM STILL looking for it, but now wordpress changed a little :(

[@SlickFX_Trader]

Thank you for sharing this but I still cant add the theme after I add the widget to the column area, It always adds it above or below the column :( I think I get confused because every video I watch is a slightly different version of Elementor than Im using. 2019 version

[@jdsn7693]

Yes, I've been having this same issue. I have not found a solution.

[@eldodc2256]

The plugin removed, do you have another way?

[@wordpressguru24]

I made an updated video, no extra plugin or code required now. kzbin.info/www/bejne/eXPZcmSvgN6mb9k

[@hasanrahat7044]

What about dropdown menu?

[@junglestar]

Thank You

[@wordpressguru24]

Welcome. :)

[@panograf]

there´s a white gap on the right side of the page.if I put 12% for the first column then elementor always sets "87,665%" for the right column instead of 88% - can´t change this. and also in your video I see the white gap on the right side.

[@eseogheneaya7853]

am also having this same issue.

[@wordpressguru24]

That's an Elementor Bug, in order to resolve this, you need to set the Structure to 50% 50% for both columns, and then add the required width for both columns, do not drag the column.

[@dannyduet1989]

can you still add a footer with this method???

[@余欣怡-o7d]

I need footer also D: Anyone can help?

[@simonli5979]

Once I add a header, the side bar has a gap until I scroll downwards

[@MrBerfre]

I cant see post content widget..help

[@apeloffdiskord]

Can you please tell me how to do that on a custom theme from scratch? Without any page builder I mean.

[@wordpressguru24]

Sure, I will try to make a tutorial on that as well. :)

[@apeloffdiskord]

@@wordpressguru24 Thanks.

[@rahmadsetiadi5929]

which Elementor version is used

[@rahmadsetiadi5929]

at 5:55 minutes I couldn't find the post content element

[@wordpressguru24]

It works with any version, I recently built the same thing again with the latest version and it works perfectly.

[@rahmadsetiadi5929]

@@wordpressguru24 resolved,,Thank you for taking the time to make this.

[@pavankumarmothukuri2227]

Post content is not available in elementor pro also

[@wordpressguru24]

I made an updated video, you can check. kzbin.info/www/bejne/eXPZcmSvgN6mb9k

[@NDK0]

Great, but the menu is nit sticky

[@wordpressguru24]

Did you install the Plugin "Sticky Menu or anything" as I did in the tutorial?

[@ayushmanbhatt6451]

I need some help, can you help me with your social ?

[@Aesthekidd]

Its free?

[@cristianokwiatkovsk9059]

does not work :/

[@MyTubezx]

its elementor pro.

[@brenDawg1991]

does not work responsively

[@wordpressguru24]

Make a different Header for Mobile and Tablet as I did in the Video.

[@ayushmanbhatt6451]

@@wordpressguru24 no but when you zoom in or lets say if you use it on different resolution it doesnt work resposively. please help

[@Viajarlocuratodo1]

@@ayushmanbhatt6451 I have the same problem. When changing resolution, items in the menu appear 2 in the same row and there is a white space below, even if I have adjusted it through css.

[@frisco6757]

To make it responsive, reduce the size of text in side menu and give less space between menu options. Make sure to leave enough blank space on bottom of the menu.