In this tutorial we learn how to create a vertical header in Elementor. We’ll also explore how to show the default horizontal header on mobile devices only, to ensure a smooth user experience.
The tutorial will cover:
✔︎ Creating a header template
✔︎ Repositioning a header to display vertically
✔︎ Adding custom CSS including media queries
✔︎ And much more!
Custom CSS:
selector{
width: 100px;
position:fixed;
}
@media all and (max-width: 767px){
selector{
width:100%;
height:100px;
}
}
@media all and (min-width:767px){
selector{
writing-mode: vertical-rl;
transform: scale(-1);
}
}
Hey there, it’s Ash from Elementor.
Have you ever wondered if you can position your header vertically, instead of horizontally in Elementor? Why wonder no more, in this Tips & Tricks tutorial, we’ll show you how to position your header vertically alongside your website’s content.
We’ll also teach you how to show the default horizontal header on mobile devices only, to ensure a smooth user experience.
We’ll create a section for our header and with the help of CSS we’ll make it display vertically on desktop and tablet.. while keeping its horizontal state on mobile… We’ll then drop our widgets in… and make our menu display vertically on the respective screen sizes.
So if you’re ready to learn how to create a vertical header in Elementor, let’s get started.
We’re going to head straight to the theme builder to create our new header template. Doing so means we’re able to apply this header to our entire website with just a few clicks.
Add a new header.
Dismiss the library and then open the header settings to give this template a more personalized title.
Let’s now add in a section…set the height to automatically fill the screen and configure the column position to stretch.
Now add a background color via the style tab. And as you can see we’ve already configured our global styles here, but you’re free to choose any color that you like.
Now we’ll add a border…border width…and border color.
Switch over to the advanced tab next and set the z-index to 5. This will ensure this section appears above all other content on our website.
Let’s now get our hands dirty and add in some custom CSS.
Open the ‘Custom CSS’ tab and then type ‘selector…followed by opening and closing the curly brackets…then within the curly brackets type…width…colon…100px…semicolon…start a new line…position…colon…fixed….semicolon’.
This CSS sets the width of our header and ensures it stays fixed to the user’s viewport.
Let’s now add in a media query. A media query allows us to define CSS for devices of a specific screen size only.
This media query tells the browser that if a screen size is 767px or less…so basically a mobile screen, then the width of our header should fill the viewport and only be 100px high.
We’ll type the…’@ symbol…followed immediately by the word media…then add a space…the word all…another space…the word and…then one more space..open parenthesis…max…dash…width…colon…767px…close parenthesis.
Now open and close the curly brackets.
Then within these curly brackets…type selector…open and close more curly brackets…and within these add a 100% width property…and a 100px height property.
Let’s now get to work and populate our new header.
Drop in the logo widget first…and then drop in the nav menu widget.
In the content tab, we’ll set the pointer to ‘none’ and the breakpoint to ‘mobile’. This will ensure the toggle menu doesn’t appear unless being viewed on a mobile size screen.
We now need to rotate our navigation menu so that it appears vertically.
Open the ‘Custom CSS’ tab in the ‘Advanced’ area, and add the following media query.
This media query tells the browser to display the navigation menu text vertically if the screen size is 767px or more, so basically anything larger than a mobile device.
OK, we can really see our new header coming together now.
The next step is to configure the spacing of our elements.
Select the column and set the vertical align to ‘space between’. Now set the horizontal align to ‘space between. Don’t worry that you didn’t see any visual changes here, this configuration will come into its own when we switch to mobile view soon.
We’ll just add some padding now to finish this section and now it’s time to see what our header looks like on different devices.
Select the responsive icon to switch to tablet view.
This looks great and works just as well as our desktop view, so we won’t change anything here.
Now drop down to mobile view.
As you can see our header automatically switches to a horizontal layout. This is all being controlled by our media query.
We’ve already set this column to display as ‘space between’, but because our elements aren’t inline, they’re currently taking up 100% width of this section.
Select the logo first and then in the advanced tab, under positioning, change this to ‘inline’.
Then do the same for the nav menu.
OK, we’re making good progress. Just a few styling aspects to take care of now. Let’s open the dropdown, so that we can see our changes in real time.
We’ll first toggle ‘full width’ on.
Now open the style tab…expand dropdown…set the text color…background color…border…border width…border color…vertical padding…and distance.
Finally, let’s expand the ‘toggle button’ tab…set the background color…and hover color.
And as you can see our mobile menu now looks great.
Let’s save this template file and assign it to show on our entire website.
If we now visit our website you can see our new vertical header in action and it looks fantastic.
Today we learnt how to create a vertical header in Elementor.
We achieved this by writing CSS to control the position and size of our header.
We then wrote media queries to target specific screen sizes to control what is shown to the user.
Finally we amended our mobile elements to ensure they appear as expected.
Thank you for watching this Tips & Tricks tutorial.
Be sure to comment below with any questions, and don’t forget to like and subscribe to our channel for more amazing tutorials.
