Elementor Vertical Header with Sidebar Navigation Menu in WordPress | Elementor Side Vertical Menu

Today I'll show you how to create Elementor Vertical Header with Sidebar Navigation Menu in WordPress (Elementor Side Vertical Menu).
✅Get Elementor Pro:
makedreamwebsite.com/elemento...
✅Get code snippets for Sidebar Header:
makedreamwebsite.com/elemento...
✅Get this READY-MADE template on TEMPLATISH (2 versions):
templatish.com/template/eleme...
In this tutorial, I’ll show you how you can create a Elementor sidebar header in your WordPress website. Inside this header, you can see the Elementor sidebar menu which is auto highlighting with the page scrolling. And at the top when we click on the toggle button, this header becomes narrow and we can see the menu with only icons.
This header is also perfectly responsive for our tablet and mobile devices. And the great thing is: for these, we don't use any side menu WordPress plugin.
Here, I give you a link to my GUMROAD shop of this ready-made template. But, if you don't want to buy, you can also start it from scratch.
So, first of all, inside header template, you need to create a section and give it a custom width to place it on the left side. Inside the section, put all the contents - Logo, Toggle Icon, Search bar, Left Side Menu with Icon and the bottom Image Box Section.
Then, we style those contents. On vertical navigation menu, we also put the link of the section's ids to achieve the click to scroll and auto focus on scroll functionality.
Lastly, to add the toggle functionality by adding some custom CSS and JavaScript code. We have also checked it on our tablet and mobile devices. On mobile, also add another toggle button on the right side.
So, that's how you can make a sidebar header in Elementor. If you enjoy this header design tutorial and also want to get more Elementor tips and tricks, don't forget to like and subscribe.

[@timtimoz]

Doesn’t work on mobile 😢

[@notallthatbad]

Really an excellent video, and very generous of you to share both the code and a way to buy it. Helped me create something 1 minute which was taking me several hours of needless work. Excellent!

[@claudettebentley]

Super helpful video. And the price for the ready made menu is so reasonable. Saves me time to set everything up. Great work!

[@susangemayel-tapper3794]

I love this design, great work! Any chance you could re-create this video for Elementor Containers?

[@dklyte9345]

"Value" they say.... is what sells.... You're an inspirational and creative designer, thanks so much for the free valuable content

[@azonlyrics3249]

Hey, I couldnt find the code that you appliead the 2nd time on Main Section, after the java code. Where is it?

[@vision__digital]

Hey everyone.

[@SiscuSimon]

always creative and educative! Great for the community! Thanks and congratulations!

[@notallthatbad]

Was curious if there was a way to make the entire thing (left-hand menu and content area) centered on the page, as in, having a fixed width centered container. Would this require an extra parent div to contain the menu and content areas?

[@complypro7025]

Hi -

[@realmaxtovar]

I was short on time so just bought the template. completely worth it. Thank you for the tutorial. My best to you!

[@thecollector5727]

you are a life saver, thanks a million. your video was super helpful. please make more videos

[@harvinderdhami6878]

Can you make it so it starts off collapsed and then opens on hover instead of a toggle?

[@FouLeeAnn]

At

[@ilianasam]

Amazing work!!! Top quality! Thank you very much! Keep going!

[@MdAmanurRahman]

Exactly what I was looking for

[@MakeDreamWebsite]

[UPDATED] Here is the ready made template with an additional - "Closed By Default" version. Link:

[@sebastienlafontaine7686]

I just bought it my friend and I'm very satisfied with it, your rock !

[@patrickmoran-photographer6946]

Hey mate! This menu is exactly what I've been looking for, thank you so much! One question I have is I would like my menu to have a transparent background. I've set the backgrounds to transparent in all places I can find within the section menus, but wanted to check if you had any ideas? Also, the menu seems to sit as an element to the left of my main page, and not on top of it. Is there any way to change this?

[@BrickBucks]

Hey, this is amazing, thank you! Just a quick question - if using this global template method for a side navigation menu, is there a way I can stop it from appearing on certain pages? I have a membership website and I only want the navigation to appear after users have logged in. How can I exclude a login page from showing this navigation template?