Create an Elementor Vertical Header | Elementor Sticky Vertical Sidebar Menu/Navigation

In this Elementor tips and tricks, I'll show you how to create an Elementor Vertical Header or Elementor Sticky Vertical Sidebar Menu/Navigation.
✅Get Elementor Pro:
makedreamwebsite.com/elemento...
✅Get Domain & Webhosting(SAVE 50%):
makedreamwebsite.com/bluehost
✅Get all code snippets for Elementor Vertical Header:
makedreamwebsite.com/elemento...
✅Get creative templates on my Template Shop:
templatish.com
Today I'll show you how you can make a vertical header on your WordPress website using Elementor. Instead of creating the header on the top, today we'll create the header on the left side of our page with a logo and a vertical menu. And it's also fully mobile responsive on the tablet and mobile devices. On mobile, it will be shown as a default header layout.
First, we need to create an header template. Inside a section we take an image (logo) and nav menu widget. Then, we add some custom CSS code to make our normal header to a sticky vertical header on the left. We also add some more code with the navigation menu for making it a Elementor sticky sidebar menu.
On the page, we add some left margin for making some place for our side header. Lastly, we make it responsive. For mobile devices, we make it a normal header and also do some styling to make it look better. Here, for the page instead of left we have given some top margin.
That’s how you can create a vertical header and left side menu in Elementor. If you enjoy this Elementor advanced tutorial, don't forget to like and subscribe.

[@shorifahamed7769]

Finally I got most helpful video to create vertical menu. Thanks a lot

[@MakeDreamWebsite]

You're welcome

[@johnravi3887]

Hi,
It was a very helpful video! I am working on a new project for a client, and I think this vertical header will be the perfect design. I really appreciate you sharing the process using Elementor. Since Elemntor is my go-to tool for everything. I will be able to follow this process easily. I really learned a lot from this process, and I will be following your method to create this vertical header. Thanks a lot for sharing this amazing video.

[@desmoq]

Thanks for the video! Keep going on these tutorial format!!!

[@lucasmpr]

keep it up with the more advanced tutorials like this and the scrolling text one ! thanks

[@MakeDreamWebsite]

Thanks, will do!

[@krzysztofwszelaki7518]

Your videos are great, and would you show how to make the logo change when arriving at a section with a given id?

[@wellnesswonderlab]

Thanks for this video, I learn some about customizing a section and columns

[@MakeDreamWebsite]

Glad it was helpful!

[@sharonreaves]

Thank you for this. Any edits to the code if you want the header on the right?

[@juandylan4052]

Thanks a lot man!

[@MakeDreamWebsite]

You're welcome

[@vodiem3766]

I use hello child theme, code not working @media (min-width: 768px){
.site-content, .site-footer{
margin-left: 100px;
}
}
How can? Thanks you

[@dan_kay]

Same here

[@diogooliveira2877]

Same here

[@borisnieminen677]

Excellent tutorial! Could you apply CSS to the vertical header itself, as another way to increase the margin so it doesn't rest on top of the content? or you wouldn't recommend this? Thanks!

[@MakeDreamWebsite]

I've to check...

[@gamershood4723]

Hi, how can I make it to the right side vertical menu? what should I write on the code?

[@BrandBull1]

Hi, thank you for this great Tutorial.... is it possible to set the vertical menu to the right side? And when, how can I do this? Thank you... OLLi

[@umerfarooq3176]

thank you bro

[@MakeDreamWebsite]

Welcome

[@AIB230]

Wow thanks bro

[@MakeDreamWebsite]

Welcome

[@bySterling]

Awesome! I’m def learning some great CSS tips also! Do you sell any of your awesome modern cool designs?

[@MakeDreamWebsite]

I'm also happy to help you. Yes I do, here I've started to sell few of my designs makedreamwebsite.gumroad.com/

[@MarceloMarconcini]

Good work man

[@MakeDreamWebsite]

Thank you

[@matchelo3]

Thank you!!
Here the CSS for margin its different: ("site-main" ... not ... "site-content")
@media (min-width: 768px){
.site-main, .site-footer{
margin-left: 100px;
}
}
Another suggestion:
Put CSS in Site CSS, not in PAGE (to run in all site)
👍👍👍

[@caroloko9]

I had the same issue, thanks a lot!!

[@antong.herborg2516]

Hi, this does not work for me. Don't know if you have to toggle custom CSS for whole site or if they made an update. Can you help?

[@dan_kay]

Doesn't work for me with the Hello theme and Elementor 3.8

[@raghuramjc2798]

Hi, I lover your videos ... very interesting. I have created a vertical menu but kept the text horizontally aligned. Now, I would like to know is there anyway one can reduce the vertical set-off gap between menu and submenu? Thanks

[@MakeDreamWebsite]

Yeah.. you can. There is also my another tutorial about sidebar header. You can check it out!

[@raghuramjc2798]

@@MakeDreamWebsite Great response. Let me check and revert.

[@ritamerino9447]

Is there a way to make this go to the right instead of the left?

[@MakeDreamWebsite]

Yes, it's also possible. But, in that case you need to customize the CSS codes on several places.

[@ritamerino9447]

@@MakeDreamWebsite Thank you for the reply! Where exactly would I make the changes?

[@richardsanchez2274]

Any answer to the follow up question?

[@madarauchiha5433]

Hello mate, I purchased the side bar. It works 99%, the issue is on mobile I can also see some of the Wordings. I just want to see the icons when it collapses

[@MakeDreamWebsite]

You can email me your page link

[@shreeramdivya]

Hi, i tried the code as you mentioned earlier but the toggle button is not working as shown in the video

[@MakeDreamWebsite]

You can email me your page link

[@shreeramdivya]

@@MakeDreamWebsite Sure i shall do that

[@user-bu2vj4yt3s]

cool

[@MakeDreamWebsite]

Thanks 🙏

[@meisterleise]

Cool idea! But: you forgot to mention the submenu. I guess there's no solution for this, right?

[@MakeDreamWebsite]

For submenu you can show it as normal in horizontal orientation. But, that will not look so well. This vertical menu is perfect suit for menus which didn't have submenus (specially for one page website).

[@harleybraeden7853]

👉 P r o m o s m!

[@archanachengat]

Is it free

[@MakeDreamWebsite]

No, you need elementor pro...