{"id":15795,"date":"2023-04-14T16:28:00","date_gmt":"2023-04-14T16:28:00","guid":{"rendered":"https:\/\/librenetworks.com\/en\/?p=15795"},"modified":"2023-05-19T10:43:02","modified_gmt":"2023-05-19T10:43:02","slug":"how-to-create-a-header-menu-with-elementor-pro-step-by-step","status":"publish","type":"post","link":"https:\/\/librenetworks.com\/en\/how-to-create-a-header-menu-with-elementor-pro-step-by-step\/","title":{"rendered":"How to Create a Header Menu with Elementor Pro Step by Step"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to Create a Header Menu with Elementor Pro Step by Step\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/PqT9821OLf8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In this video, I&#8217;m going to show you how to create a header menu with Elementor Pro.<\/li>\n\n\n\n<li>The first thing you need is to have Elementor and <a href=\"https:\/\/librenetworks.com\/en\/download\/elementor-pro-wordpress-plugin\/\">Elementor Pro<\/a> installed. You can download these and many other premium plugins for WordPress from Librenetworks.com by becoming a member. You&#8217;ll find the link below in the video description.<\/li>\n\n\n\n<li>Once you have Elementor and Elementor Pro installed, in the left-hand side menu of WordPress, you need to go to Templates, Add New.<\/li>\n\n\n\n<li>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.<\/li>\n\n\n\n<li>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&#8217;ll see how to create one from scratch.<\/li>\n\n\n\n<li>To do that, simply click on the close tab button on the top right.<\/li>\n\n\n\n<li>Now, the first step is to define the structure you want the Header to have.<\/li>\n\n\n\n<li>To do that, click on the plus symbol. This time, we&#8217;ll define a two-block structure.<\/li>\n\n\n\n<li>In the left section, we&#8217;ll place the website logo.<\/li>\n\n\n\n<li>Click on the section, and in the left-hand side menu, drag and drop the Site Logo option.<\/li>\n\n\n\n<li>If you haven&#8217;t configured your site&#8217;s logo yet, as is the case with mine, you&#8217;ll see something like this. To configure it, click on this button, and the site settings will open.<\/li>\n\n\n\n<li>Here, you can define the site&#8217;s logo and favicon, as well as the name and description of the website.<\/li>\n\n\n\n<li>Click, select the image for your logo, and click on Insert.<\/li>\n\n\n\n<li>Now, click on Update, and you can close the tab.<\/li>\n\n\n\n<li>As you can see, your site&#8217;s logo is already appearing in the header.<\/li>\n\n\n\n<li>Now, on the right section, we will place the menu.<\/li>\n\n\n\n<li>Click on the section, and in the left sidebar, drag and drop the Menu option.<\/li>\n\n\n\n<li>If you haven&#8217;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.<\/li>\n\n\n\n<li>Specify a name for the new menu and click the button to create a new menu.<\/li>\n\n\n\n<li>Now, select the pages that you want to appear in the menu.<\/li>\n\n\n\n<li>Arrange them and save.<\/li>\n\n\n\n<li>Go back to the header editor, save as draft, and refresh the page.<\/li>\n\n\n\n<li>As you can see, now the menu we created appears.<\/li>\n\n\n\n<li>To make it look better, let&#8217;s vertically align it to the center.<\/li>\n\n\n\n<li>Hover over the right column, right-click on the mouse, and select Edit Column.<\/li>\n\n\n\n<li>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.<\/li>\n\n\n\n<li>Let&#8217;s do the same with the left column where the logo is, so that both columns are aligned the same way.<\/li>\n\n\n\n<li>Hover over the left column, right-click on the mouse, and select Edit Column.<\/li>\n\n\n\n<li>Go to Vertical Alignment, click on the dropdown, and select the Middle option.<\/li>\n\n\n\n<li>Now, let&#8217;s create a top section that we will use to display a free shipping message.<\/li>\n\n\n\n<li>Hover over the menu section and click on the plus symbol.<\/li>\n\n\n\n<li>Add a new section, this time with a single column.<\/li>\n\n\n\n<li>Once the section is created, go to the Layout section, and under Content Width, select Full Width.<\/li>\n\n\n\n<li>Click on the plus symbol of the section and drag and drop the Header option.<\/li>\n\n\n\n<li>Type the message you want. In this case, we will put Free 24-hour Shipping.<\/li>\n\n\n\n<li>In HTML Tag, select Paragraph.<\/li>\n\n\n\n<li>Align it to the center horizontally.<\/li>\n\n\n\n<li>Let&#8217;s also align it to the middle of the vertical axis, just like we did with the menu and the logo.<\/li>\n\n\n\n<li>Click on the column symbol to edit it.<\/li>\n\n\n\n<li>Go to Vertical Alignment, click on the dropdown, and select the Middle option.<\/li>\n\n\n\n<li>To change the background color, select the section, go to Style, and Background.<\/li>\n\n\n\n<li>Under Background Type, you can choose between a solid color background, gradient, video background, or slideshow background.<\/li>\n\n\n\n<li>For this case, let&#8217;s select the Classic Background option.<\/li>\n\n\n\n<li>Using the color picker, you can choose the color you want or paste a color code.<\/li>\n\n\n\n<li>I will paste a yellow color code that matches my logo.<\/li>\n\n\n\n<li>To finish, simply click on the publish button and select where you want the menu to be displayed.<\/li>\n\n\n\n<li>You can choose to display it on the entire site or only on specific pages.<\/li>\n\n\n\n<li>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.<\/li>\n\n\n\n<li>Yes, you can create multiple menus and have them displayed based on the page the user is on.<\/li>\n\n\n\n<li>In this case, I want to display a single menu, and have it displayed on all pages of the website.<\/li>\n\n\n\n<li>I select this option and click on save.<\/li>\n\n\n\n<li>Now, if we go to the website and refresh the page, you will see that the menu is displayed correctly.<\/li>\n\n\n\n<li>Of course, I forgot to mention earlier that you can also customize the typography and letter colors to your liking.<\/li>\n\n\n\n<li>For example, to change the typography of the menu, simply select it, go to the style tab, and click on the Typography section.<\/li>\n\n\n\n<li>Here, you can change the font type, size, letter spacing, etc.<\/li>\n\n\n\n<li>You have full control to do whatever you want.<\/li>\n\n\n\n<li>The same goes for colors.<\/li>\n\n\n\n<li>In the style tab, you can modify the text color with the color picker.<\/li>\n\n\n\n<li>You can also change the colors when hovering over the menu or for the currently selected tab.<\/li>\n\n\n\n<li>This can be done in these two tabs.<\/li>\n\n\n\n<li>For example, here we&#8217;re going to set the color of the hover selector when the mouse is placed over the menu.<\/li>\n\n\n\n<li>We&#8217;re going to set it to the same shade of blue as the &#8220;free shipping&#8221; text.<\/li>\n\n\n\n<li>The same can be done for the currently active tab. We&#8217;ll also set it to blue.<\/li>\n\n\n\n<li>I also want to mention that columns and other elements can be resized, columns can be added or removed, and so on.<\/li>\n\n\n\n<li>You have full freedom to do whatever you want, and now it&#8217;s up to you to experiment with the options to customize everything to your liking.<\/li>\n\n\n\n<li>Finally, let&#8217;s see how to make the menu sticky, meaning that it stays fixed at the top while scrolling down.<\/li>\n\n\n\n<li>We&#8217;re going to make the menu stick to the top of the screen when the user scrolls down, but we&#8217;ll only make the menu area sticky without the top part, so that it doesn&#8217;t take up too much space on the screen.<\/li>\n\n\n\n<li>To do this, we select the menu section and go to advanced settings.<\/li>\n\n\n\n<li>Once there, we go to Sticky Effects and select the &#8220;Top&#8221; option from the drop-down menu.<\/li>\n\n\n\n<li>Next, you can choose whether you want the menu to be sticky on all devices or only on some.<\/li>\n\n\n\n<li>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.<\/li>\n\n\n\n<li>Finally, to make it look good while scrolling down, we&#8217;ll give the menu a white background.<\/li>\n\n\n\n<li>To change the background color, we select the section, go to Style, and then Background.<\/li>\n\n\n\n<li>Under Background Type, we select the Classic Background option and choose white using the color picker.<\/li>\n\n\n\n<li>Click on Save and your menu will be ready.<\/li>\n\n\n\n<li>Now, if you refresh the page, your menu will stay fixed at the top of the screen when the user scrolls down.<\/li>\n\n\n\n<li>I hope you&#8217;ve learned how to create a header menu with Elementor Pro. Now it&#8217;s your turn to experiment.<\/li>\n\n\n\n<li>Remember to subscribe and visit Librenetworks.com if you want to save money on premium plugins and themes for WordPress.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":16070,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_trash_the_other_posts":false,"editor_notices":[],"footnotes":""},"categories":[33,37],"tags":[],"class_list":["post-15795","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugins-wordpress","category-wordpress"],"_links":{"self":[{"href":"https:\/\/librenetworks.com\/en\/wp-json\/wp\/v2\/posts\/15795","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/librenetworks.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/librenetworks.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/librenetworks.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/librenetworks.com\/en\/wp-json\/wp\/v2\/comments?post=15795"}],"version-history":[{"count":4,"href":"https:\/\/librenetworks.com\/en\/wp-json\/wp\/v2\/posts\/15795\/revisions"}],"predecessor-version":[{"id":16275,"href":"https:\/\/librenetworks.com\/en\/wp-json\/wp\/v2\/posts\/15795\/revisions\/16275"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/librenetworks.com\/en\/wp-json\/wp\/v2\/media\/16070"}],"wp:attachment":[{"href":"https:\/\/librenetworks.com\/en\/wp-json\/wp\/v2\/media?parent=15795"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/librenetworks.com\/en\/wp-json\/wp\/v2\/categories?post=15795"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/librenetworks.com\/en\/wp-json\/wp\/v2\/tags?post=15795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}