You may have read other articles on this site where I explain how important it is to provide your visitors with a good experience. Believe it or not, how your users navigate and how quickly they find what they’re looking for plays a big part on that. That’s why having a well designed header menu can make or break your site. In this article, I’m going to show you 3 different ways you can build your header menu on Elementor Pro.
1. Your Typical Standard Header Menu
This is the one you see in pretty much every website out there and also, the easiest to design. To build this, you only need to create your header template in Elementor, set up a section with two columns and insert the nav menu widget on one column with the site logo on the other (it is usually logo on the left, nav menu on the right).
However, this type of menu works because it is common. We are so used to seeing this type of layout that our eyes are pretty much trained to immediately look top right when we get to a website and start looking for info. So, don’t reinvent the wheel if you don’t have to.
Suggested reading: Transparent Sticky Headers In Elementor: How To Create Them
To build a regular menu, follow these steps:
- Go to Templates > Theme Builder and click on create new. On the screen that pops up, select header and enter the name of your template (something simple like Site header would do, no need to get complicated here).
- You can use one of Elementor’s already made header templates where they have the section, the logo and the menu to the right or, if you don’t have Elementor Pro and want to build a header with Elementor free, all you need to is insert a section with two columns.
- Then you drop the image widget making sure you link it to the logo.
- Finally, you place the Nav Menu widget on the other column and choose one of the menus you have built on the Appearance tab. This widget will be placed to the left by default, so consider aligning it to the right for a better look.
This is pretty much it. You can obviously play with the style of the widgets so that the design adjusts your branding. By this I mean, you can select a background color for the section, a different font for the menu, a bottom border for the header. It’s all up to you! When you’re done, click publish and select the conditions where you want the header to be displayed.
*Note: Don’t forget to adjust the mobile settings for the Nav Menu widget, like when does it become a dropdown menu – if on tablet & mobile devices, or if only on mobile.
Here is a video recap:
Let’s move on to the second type, shall we?
2. A Menu That Fades In Over The Page? That Seems Cool!
This is one of the two header menus I’ll talk about in this post where we’ll use the icon widget and a popup. In this case, no links are placed on the header in order to give more focus to the content and the controversial hamburger icon (apparently, there are some in the design community who hate it and others who love it) along with the logo to open up a popup that’ll cover the entire screen for us to place all of our navigation items.
Consider this design if you have several important pages that you want users to get to and would also like to place some images or text in the header. To have an overlay menu in your website, this is what you need to do:
- Ok, so for this case, we’ll have to first create a popup where we’ll have our menu items laid out. So head over to Templates > Popup and click on Add New.
- Unlike the previous header menu, very few of the templates from the library will work for what we’re trying to do. So, it’s better if you create this one from scratch.
- For our popup to cover the entire screen you’re going to have to set the height to “Fit To Screen” and change the width from PX to VW (means viewport width) and type 100.
- After doing this, you’ll notice you have like a blank canvas where you can go bananas with your design. For the purposes of this tutorial, I’m going to have a two columned menu with an image on the side. So, let’s add a section with three columns.
- On both the first and second column, add the Nav Menu widget. And for the third column, insert the image widget with the text editor widget below. You’ll get something like this:
- Now, to make it a little bit prettier, let’s make the columns more spaced out by clicking on Columns Gap > Wider and adding a right and left border to the second column, like this:
That’s it. The popup you can design it whatever way you want it, don’t feel like you need to follow my design, in fact it’s better if you don’t as I’m sure you can make a better design than this. Once you’re ready, click on Publish, select the condition “Entire Site” and click on Save & Close (don’t mind the other tabs on this screen).
- Now that the popup is ready, head back to Templates > Theme Builder, add a new header like you did on the previous menu type and repeat steps 1 to 3.
- Instead of adding the Nav Menu widget drop the icon widget, align it to the right and select the “Bars” icon.
- On the icon panel, locate the dynamic text that’s next to Link. Click on that, look for Actions and select Popup.
- Click again where it says Popup and use the search bar to select the Popup you built on steps 1 to 6.
This is it. Once your users click on the icon, the popup with your menus will be opened. Pretty cool, huh? Consider also adding a little entrance animation to make everything look smoother.
*Note: Given that your users expect your website to be as accessible on mobile as it is on desktop, consider designing different popups for mobile and desktop that get triggered from different hamburger icons. What I mean by this is that you add two hamburger icons, one hidden for tablets and mobiles and the other one hidden for desktops; the former will trigger the popup for desktop while the latter will trigger the popup for mobiles and tablets.
Video recap for the overlay menu:
3. Look Out From The Side! The Menu Coming In Hot!
The second case where we have to repeat the majority of our previous steps, except in the animation and the design. While in the Overlay Menu, the popup covers the entire screen, the Flyover Menu just covers one side of the website (on desktop and tablet, that is) and the effect is more of a slide.
To build this header menu, you have got to follow all the steps laid out in the Overlay Menu, the only difference is that instead of having the width of the Popup to be 100 VW, we’re going to make it 400px and aligned to the right. Plus, we’ll add an overlay in the popup setting to make it stand out more.
So, let’s go from the beginning:
- In the popup settings, make it fit to screen.
- Make the width 400px.
- In position, align it to the right.
- Click on the overlay toggle to enable it.
- In the Entrance and Exit animation, select fade in right and fade out right respectively.
Basically, it’ll be like this:
- Now, add the widgets you’d like. In the image below, you will notice that I’ve added the heading widget, the nav menu and the form widget for a newsletter signup. You can use your creativity to add whatever kind of widgets combination works best for your site.
- Publish your popup and then repeat the steps 7-10 from the Overlay menu and that’s it.
And the final recap:
That is it for this article. Stay tuned, because I’ll also be coming with tutorials for the Mega Menu (which is pretty popular among users) and the Sidebar Menu – both standard and with vertical rotated text. For now, if you want inspiration, check out these kick-ass menu designs from other websites.