- In this video, I’m going to show you how to create a header menu with Elementor Pro.
- The first thing you need is to have Elementor and Elementor Pro installed. You can download these and many other premium plugins for WordPress from Librenetworks.com by becoming a member. You’ll find the link below in the video description.
- Once you have Elementor and Elementor Pro installed, in the left-hand side menu of WordPress, you need to go to Templates, Add New.
- Now, in the template type, click on the dropdown and choose Header. Then, enter a name for the template, for example, Header Demo. After that, click on Create Template.
- Next, you can choose from some of the pre-designed templates that come with the Pro version or create one from scratch. This time, we’ll see how to create one from scratch.
- To do that, simply click on the close tab button on the top right.
- Now, the first step is to define the structure you want the Header to have.
- To do that, click on the plus symbol. This time, we’ll define a two-block structure.
- In the left section, we’ll place the website logo.
- Click on the section, and in the left-hand side menu, drag and drop the Site Logo option.
- If you haven’t configured your site’s logo yet, as is the case with mine, you’ll see something like this. To configure it, click on this button, and the site settings will open.
- Here, you can define the site’s logo and favicon, as well as the name and description of the website.
- Click, select the image for your logo, and click on Insert.
- Now, click on Update, and you can close the tab.
- As you can see, your site’s logo is already appearing in the header.
- Now, on the right section, we will place the menu.
- Click on the section, and in the left sidebar, drag and drop the Menu option.
- If you haven’t created any menu yet, it will appear like this. Click on it, and a new window will open where you can create a menu.
- Specify a name for the new menu and click the button to create a new menu.
- Now, select the pages that you want to appear in the menu.
- Arrange them and save.
- Go back to the header editor, save as draft, and refresh the page.
- As you can see, now the menu we created appears.
- To make it look better, let’s vertically align it to the center.
- Hover over the right column, right-click on the mouse, and select Edit Column.
- Next, go to Vertical Alignment, click on the dropdown, and select the Middle option. As you can see, the menu is now centered vertically in the column.
- Let’s do the same with the left column where the logo is, so that both columns are aligned the same way.
- Hover over the left column, right-click on the mouse, and select Edit Column.
- Go to Vertical Alignment, click on the dropdown, and select the Middle option.
- Now, let’s create a top section that we will use to display a free shipping message.
- Hover over the menu section and click on the plus symbol.
- Add a new section, this time with a single column.
- Once the section is created, go to the Layout section, and under Content Width, select Full Width.
- Click on the plus symbol of the section and drag and drop the Header option.
- Type the message you want. In this case, we will put Free 24-hour Shipping.
- In HTML Tag, select Paragraph.
- Align it to the center horizontally.
- Let’s also align it to the middle of the vertical axis, just like we did with the menu and the logo.
- Click on the column symbol to edit it.
- Go to Vertical Alignment, click on the dropdown, and select the Middle option.
- To change the background color, select the section, go to Style, and Background.
- Under Background Type, you can choose between a solid color background, gradient, video background, or slideshow background.
- For this case, let’s select the Classic Background option.
- Using the color picker, you can choose the color you want or paste a color code.
- I will paste a yellow color code that matches my logo.
- To finish, simply click on the publish button and select where you want the menu to be displayed.
- You can choose to display it on the entire site or only on specific pages.
- In general, you will want it to be displayed on the entire site, although in some cases, such as a Landing Page, you may not want the menu to be displayed, or you may want to display a different menu.
- Yes, you can create multiple menus and have them displayed based on the page the user is on.
- In this case, I want to display a single menu, and have it displayed on all pages of the website.
- I select this option and click on save.
- Now, if we go to the website and refresh the page, you will see that the menu is displayed correctly.
- Of course, I forgot to mention earlier that you can also customize the typography and letter colors to your liking.
- For example, to change the typography of the menu, simply select it, go to the style tab, and click on the Typography section.
- Here, you can change the font type, size, letter spacing, etc.
- You have full control to do whatever you want.
- The same goes for colors.
- In the style tab, you can modify the text color with the color picker.
- You can also change the colors when hovering over the menu or for the currently selected tab.
- This can be done in these two tabs.
- For example, here we’re going to set the color of the hover selector when the mouse is placed over the menu.
- We’re going to set it to the same shade of blue as the “free shipping” text.
- The same can be done for the currently active tab. We’ll also set it to blue.
- I also want to mention that columns and other elements can be resized, columns can be added or removed, and so on.
- You have full freedom to do whatever you want, and now it’s up to you to experiment with the options to customize everything to your liking.
- Finally, let’s see how to make the menu sticky, meaning that it stays fixed at the top while scrolling down.
- We’re going to make the menu stick to the top of the screen when the user scrolls down, but we’ll only make the menu area sticky without the top part, so that it doesn’t take up too much space on the screen.
- To do this, we select the menu section and go to advanced settings.
- Once there, we go to Sticky Effects and select the “Top” option from the drop-down menu.
- Next, you can choose whether you want the menu to be sticky on all devices or only on some.
- My recommendation is to make the menu sticky only on desktop computers, as it may take up too much space on mobile devices and provide a poor user experience.
- Finally, to make it look good while scrolling down, we’ll give the menu a white background.
- To change the background color, we select the section, go to Style, and then Background.
- Under Background Type, we select the Classic Background option and choose white using the color picker.
- Click on Save and your menu will be ready.
- Now, if you refresh the page, your menu will stay fixed at the top of the screen when the user scrolls down.
- I hope you’ve learned how to create a header menu with Elementor Pro. Now it’s your turn to experiment.
- Remember to subscribe and visit Librenetworks.com if you want to save money on premium plugins and themes for WordPress.
