How to Add A Sidebar Menu with Elementor - 2022
HTML-код
- Опубликовано: 23 май 2019
- Hello everyone, in this video I have shown HOW TO MAKE A STICKY SIDEBAR / VERTICAL MENU in WordPress using Elementor Pro Page Builder. This method will work with any WordPress Theme, if you found something unclear in the video then please comment below and I will try to reply as soon as possible. And if this video helps you in any way then please LIKE this Video and SUBSCRIBE to my channel. Thanks
Excellent, keep it up
After a lot of trouble i finally followed your video and it worked out very easily, its really great thank you.
I love this tutorial, you made my day. All I can say is Thank you, Thank you and Thank you.
You are welcome, please do Subscribe as well, I will be making more related videos. :)
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.
Glad that the video helped you. :)
Hey, thanks for this tutorial! this is exactly what I was looking for!
You are welcome. :)
Spent 2 days looking for this.
Superb tutorial. Exactly what I was looking for
Well-done tutorial! Thank you for taking the time to make this.
You are welcome. :)
Thank you so much for this tutorial... BRILLIANT!
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
You're welcome, happy to know that the tutorial helped you, and yes I will be making more tutorials soon. :)
Exactly what I needed, very well thought out video. Audio track was a little low but this is an EXCELLENT video. FIVE * * * * * (stars!)
Thank you! Exactly what I needed!
Exactly what I was looking for. Thank you :)
Thank you for this tutorial, very complete!
You're welcome. :)
idk you ... but youre the best. Thank you so much
Exactly what I was searching tirelessly for. Thanks
Glad it helped you. :)
love it. thanks for sharing your knowledse
Thanks for this. It is best to mention an extra plugin requirement in your description. So in this case, the Sticky Everything plugin.
Elementor can do sticky content now on its own
Muito simples, parabéns pelo video!
Great...Thanks.
Thanks. I really appreciate your video. It has helped me.
first-time vertical menu with elementor, detail and a good way of designing a vertical menu
Thanks. :)
Thank you so much! Great tutorial! I just subscribed to your channel!
Amazing....keep it up
Brilliant! Thank you !
Really informative and helpful tutorial. Thanks a lot 👍😊
You're welcome. :)
I was looking for this kind of video for a long time. Thanks a lot.
Glad it was helpful!
A GREAT FIRST VIDEO. THANKS FOR THE LESSON.
Thanks, man you saved me!
je vous remercie infiniment pour votre tuto, vraiment merci
Thank you very much ! very easy to understand
Amazing , you are a master, thanks for preparing this video!!
You're welcome, Glad it was helpful!
Thank you for this....Great going ...hoping for more wordpress videos
You are welcome.
Making the next video soon. :)
Thanks for the video, helped me a lot !
Awesome tutorial bro..
Thank you..
You are welcome. :)
You are my hero right now.
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?
thank you . hope you will upload more video about elementor
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
Nice one. Keep making these.
Thanks. :)
Thanks alot man. This was super helpful
You are welcome, I am glad the tutorial helped you. :)
Well-done!!!!!! tkss!
Very useful tutorial Thankyou!!!!!
You're welcome, Glad it was helpful!
Sir how do you apply it if you already have pages and just want the sidebar to replace my navigation?
Lifesaver
thanks. very nice!
its useful , thanks
will this appear in all page or only edited page...
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
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.
just awesome.
great job
Boom! Happy client thanks!
Glad it helped. :)
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. !
Thanks for this
You are welcome. :)
Thank you!
Very clear and useful. I have a question. I'm finding that when I switch to mobile the styling of the navigation (font, colors) is gone and it looks similar to what you showed when you first styled the mobile with the white drop down menu and black bars for selection. But later when you showed your nav for mobile on the template in desktop view it seemed to be correct, white type, all caps, on pink background. Why is this? I can't figure out what is going wrong with mine. Thank you.
For the Mobile Menu you need to give the Styles and everything to the Menu Drop-down in the style Tab.
@@wordpressguru24 I have done this. The styles seem to be there but the menu doesn't reflect the styles. There's a moment in the video when your mobile menu looks generic, the way mine is appearing. But later in the video it is styled correctly, white type on pink. Is there a different place to style it or just the regular Style area?
Super!
excelente
Thank you Sir, but now we have a builtin sticky option in elementor we dont need any extra plugin
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
i dont find post content. its from elementor pro? i have the 2.9.4 version
is this will appear on all page...?
Thank You
Welcome. :)
great
thank you :)
Hey, Is it possible on an ocean-wp theme STICKY SIDEBAR / VERTICAL MENU?
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:
You can add the Custom CSS in your Theme Customizer by going into Appearance and then "Customize".
hi thanks, i dont have the nav menu , it is only for elementor pro? how can install-get this widget ?
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.
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.
nav menu is a pro feature. What do we do if we dont have the pro version of elementor?
Hi! I am using Elementor pro and there's no post content. What can I use instead?
Thank you :)
You're welcome, Glad it was helpful!
Thx for the great tutorial, after publishing I still cant see it on my site after refreshing? why is that?
Your Homepage should be set to the "Default Template"
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.
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...
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
Yes, I've been having this same issue. I have not found a solution.
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!
Agree - when you resize the window, stuff happens :(
Hello Ekikoo, have you found a solution for this issue? I am experiencing the same problem..
@@azsmall23 Hello, have you found a solution for this issue? I am experiencing the same problem..
@@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.
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.
Thanks
You're welcome, Glad it was helpful!
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.
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.
After all of that, i'll just create individual pages with their own content and set the page link to the side menu, right?
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.
Can you please tell me how to do that on a custom theme from scratch? Without any page builder I mean.
Sure, I will try to make a tutorial on that as well. :)
@@wordpressguru24 Thanks.
I can't add a footer at the wnd of the page with this menu
Help pleaasee
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?
Did you install the Plugin i mentioned in the video to make it sticky?
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?
Use a Vertical Menu.
@@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).
What about dropdown menu?
I can not find the post content addon?
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
Same here, did you find a solution? :)
@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!
I cant see post content widget..help
The plugin removed, do you have another way?
I made an updated video, no extra plugin or code required now.
ruclips.net/video/CBvA1yKys9w/видео.html
5:53 I drag the post content widget into the right column but it duplicates the sidebar menu within the space, how do I fix this???
same issue
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.
am also having this same issue.
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.
IM STILL looking for it, but now wordpress changed a little :(
When I go to make the template there is no option for "single" it only lists Page and Section D=
I made an updated video you can check it out.
ruclips.net/video/CBvA1yKys9w/видео.html
Post content is not available in elementor pro also
I made an updated video, you can check.
ruclips.net/video/CBvA1yKys9w/видео.html
can you still add a footer with this method???
I need footer also D: Anyone can help?
which Elementor version is used
at 5:55 minutes I couldn't find the post content element
It works with any version, I recently built the same thing again with the latest version and it works perfectly.
@@wordpressguru24 resolved,,Thank you for taking the time to make this.
Once I add a header, the side bar has a gap until I scroll downwards
I need some help, can you help me with your social ?
Great, but the menu is nit sticky
Did you install the Plugin "Sticky Menu or anything" as I did in the tutorial?
Its free?