How to Create a Vertical Header [Advanced]

[@Elementor]

***2023 Update: Position (previously named Custom Positioning) can now be found under the Advanced > Layout tab.

[@sharonreaves]

For those of you looking for a right sided header someone from Elementor helped me with a solution: To make the header move to right side, you simply need to add right:0; after position:fixed. It worked for me. Hopefully it will help others as well.

[@iLikeMyOwnPosts]

...I just had to figure out how to do this all on my own. It works... it looks great. It was challengine and can be confusing to edit... so I'm eager to see how you guys did it and how it differs!

[@albacastro3076]

Works great! Although I am trying to add a link anchor to section but seems that it only works with vertical scrolling webs. Could anybody explain what to do in these cases? Thanks!

[@firozfaizan]

Thanks for your informational video. Want to know if it works if navigation has 2 level deep.

[@eric-rounds]

This was really great and broken down into all the steps needed. But I’m curious why you’re using custom CSS and not the transform capabilities now part of Elementor?

[@iamshirleyt]

Wondering the same. I’m going to test out the transform capability to see it it works

[@TheOne-rc4yv]

great tutorial, quick question...how to i make it to the right side instead of the left? :)

[@sirjahan]

I also want to know

[@kikirocko4876]

I would also like to know

[@AnnitaCaniglia]

Hey there, I'm having an issue where the header adds unwanted padding to the top of my page. How can I get rid of that? Thanks for the tutorial!

[@sutapamazumdar5244]

This was great! Thank you.

[@mafusail1900]

Hello, perfect tutorial, but how to transfer menu to the right? )) I would be grateful if someone could tell me and others this

[@kevintunis6654]

What template are you using in the tutorial? Is there a tutorial on the horizontal scrolling used in this tutorial?

[@mdabdullatifsagor2260]

Awesome tutorial...

[@dougcapron7940]

Great tutorial, thanks! I would like to have a hamburger menu within the vertical menu for desktop as well, is this possible? From there I would like to have a fly out full screen menu, but I don't want to use Popups. Any suggestion would be appreciated. + secondly, how do you modify the position of the menu from the lower bottom to the middle of the header, again for desktop. Cheers

[@idanratinsky8480]

at 5:14 - there is no "positioning" tab, what to do instead? I'm using the latest elementor pro version... why don't you update your videos according to changes...

[@Elementor]

@idanratinsky8480 Position (previously named Custom Positioning) can now be found under the Advanced > Layout tab.

[@rehansanadi8392]

Hey elementor it is a great tutorial I was wondering If I want to position the vertical header on the right hand side of the website how can I achieve that Right now the header is on the left hand side of the website please let me know thanks in advance

[@rehansanadi8392]

Hi Steven continuing on this video can you also show us how to create a vertical header to change colors according to each section like suppose there are 3 fit to screen section and as the user scrolls through each section the header color should change like first section header color is red user scrolls to the section section the header color changes to blue something like this is it possible using elementor ?

[@storytelller]

Hey! Thanks for the great tutorial! Could someone advise me how to make the menu to be with hamburger in the header (this is clear...) and to expand on full screen. How to change the CSS? Your help will be appreciated! Tsvetty

[@mmb811]

So it's not available via Elementor, it's just some added CSS

[@eric-rounds]

Yeah so that’s the thing all of these are available as settings and the transform area. So I don’t understand why they’re using custom CSS for this tutorial when it should all be done using the controls that have recently been released.

[@mmb811]

@@eric-rounds Yea, I thought the ELEMENTOR video/tutorial was going to be on Elementor, not a class in CSS

[@mmb811]

@Steven Kiridis Would be nice if basics like vertical menus where wholly build in as features of Elementor, instead of requiring custom CSS (not understood by many non-tect designers) ... but point taken

[@dianelaidlaw837]

@@mmb811 It says "Advanced " so of course it's not gonna be understood by designers who just drag and drop.

[@mmb811]

@@dianelaidlaw837 not the point I made

[@mohammadalifdewan7227]

I face some problem with custom css. I do css in elementor, it works. Then, when I delete the css, the css doesn’t disappear. It still working. Why? What's the solution?