{"id":5562,"date":"2020-09-24T12:12:10","date_gmt":"2020-09-24T12:12:10","guid":{"rendered":"https:\/\/colibriwp.com\/blog\/?p=5562"},"modified":"2022-02-25T14:31:35","modified_gmt":"2022-02-25T14:31:35","slug":"wordpress-menus","status":"publish","type":"post","link":"https:\/\/colibriwp.com\/blog\/wordpress-menus\/","title":{"rendered":"The WordPress Menus Diaries: Beginners Guide (Tips and Tricks)"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Do you want to create a WordPress menu and don\u2019t know where to start?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This article will shine a light on the types of menus available and also the methods at your disposal to build such menus.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But, first things, first:<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">What can you include in WordPress menus?<\/span><\/h2>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Pages. You can add here services pages, the \u201ccontact us\u201d page, the blog listing, and more.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Posts. This refers to your blog articles.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Custom links. You can link to external pages, to social media profiles but you can also create anchor-based menus, for single page websites. This means that the moment you select a menu item, you\u2019d be directed to that specific page section.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">This is how we organized our very own <a href=\"https:\/\/colibriwp.com\/blog\/how-to-build-a-wordpress-website-in-2021\/\">WordPress website<\/a>.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5502\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/image4.png\" alt=\"Custom links based WordPress menu\" width=\"610\" height=\"308\" \/><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Blog categories<img loading=\"lazy\" class=\"aligncenter wp-image-5546\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/blog-categories.jpg\" alt=\"blog categories added to WordPress dropdown menu\" width=\"610\" height=\"285\" \/><\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Types of WordPress menus<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Definitely, the horizontal menu is the most popular one, and on mobile, we all recognize hamburger menus, but what other options are out there?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">See below.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><strong>Horizontal WordPress menus<\/strong><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">The most common navigation menu style is the horizontal text-based one. In this navigation menu, you have a list of your main page sites.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5579 size-full\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/horizontal-WordPress-menu.jpg\" alt=\"horizontal WordPress menu example\" width=\"1581\" height=\"196\" \/><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><strong>Vertical WordPress menus<\/strong><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Rarely used, vertical WordPress menus can be positioned on the left or right-hand side. Their biggest downside is the fact that they use up important screen real estate.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><strong>Hamburger menus<\/strong><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">The hamburger menu or three-line menu is a common solution often seen on mobile devices, for responsive websites. When tapped, the traditional menu unfolds. This is a stylish and subtle menu design, that is sometimes used on desktop by minimalist websites. It seems that Amazon began to use it as well.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5569 size-full\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/amazon-hamburger-menu.jpg\" alt=\"Amazon hamburger menu\" width=\"444\" height=\"255\" \/><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><strong>Sticky WordPress menus<\/strong><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Sticky or fixed navigation means that the menu does not disappear when scrolling happens. A <a href=\"https:\/\/wpsticky.com\/\">sticky menu<\/a> is very trendy right now. I feel that they are improving user experience, by eliminating unnecessary scrolling back.\u00a0<\/span><\/p>\n<div class='embed-container'><a href=\"https:\/\/share.getcloudapp.com\/mXuyGYBB\"><img loading=\"lazy\" src=\"https:\/\/p221.p4.n0.cdn.getcloudapp.com\/items\/mXuyGYBB\/Screen%20Recording%202020-09-02%20at%2002.36.50.03%20PM.gif\" alt=\"Screen Recording 2020-09-02 at 02.36.50.03 PM\" width=\"1344\" height=\"606\" \/><\/a><\/div>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Dropdown menus<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">When there are more pages that you want to showcase, and they can be considered subtopics of a larger topic, you can structure the menu in the dropdown format.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s say we&#8217;re dealing with the website for an IT outsourcing. The menu could look like this: Services, <a href=\"https:\/\/colibriwp.com\/blog\/wordpress-testimonials\/\">Testimonials<\/a>, <a href=\"https:\/\/colibriwp.com\/blog\/how-to-make-a-portfolio-in-wordpress\/\">Portfolio<\/a>, <a href=\"https:\/\/colibriwp.com\/blog\/about-us-page\/\">About Us<\/a>, Contact.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">In our own case, we used a tiny dropdown menu for support documentation and contact.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5574\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/colibri-dropdown-menu.jpg\" alt=\"Colibri dropdown menu\" width=\"610\" height=\"164\" \/><\/p>\n<p><span style=\"font-weight: 400;\">We\u2019ve covered the dropdown WordPress menus topic in this in-depth <a href=\"https:\/\/colibriwp.com\/blog\/wordpress-dropdown-menus\/\">blog article<\/a>.<img loading=\"lazy\" class=\"aligncenter wp-image-5521\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/image23.png\" alt=\"Menus joke\" width=\"400\" height=\"400\" \/><\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><strong>Mega-menu<\/strong><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">The mega menus offer more than a dropdown menu and are often seen in e-commerce websites that have many options (they seem like dropdown menus inside other dropdown menus :)) ). Their downside is that they can be overwhelming. Always ask yourself if you really need such a menu, or some filtering options might be the right solution. Also, they can be truly tricky on mobile.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now that you figured out your menu options, let\u2019s build one. I\u2019ve made a 4 methods list, pick your winner! If you are interested in a particular method you can jump straight to it by clicking on the title below.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><a href=\"#WordPress_Menu\"><span style=\"font-weight: 400;\">How to create WordPress menus in the Classic Editor in 4 steps<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a href=\"#Customizer_Menu\"><span style=\"font-weight: 400;\">How to create WordPress menus in the Customizer<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a href=\"#Sidebar_Menu\"><span style=\"font-weight: 400;\">How to create WordPress sidebar and footer menus using widgets<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><a href=\"#Plugins_Menu\"><span style=\"font-weight: 400;\">How to create WordPress menus via plugins<\/span><\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">How to create WordPress menus in the Classic Editor in 3 steps<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Step 1: Creating a simple WordPress menu in the Classic Editor<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Go to the WordPress Dashboard -&gt; Appearance, then select \u201cMenus\u201d.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-5571 aligncenter\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/appearance-menus.jpg\" alt=\"WordPress Dashboard Appearance Menus\" width=\"397\" height=\"292\" \/><\/p>\n<p><span id=\"WordPress_Menu\" style=\"font-weight: 400;\">Next, select \u201ccreate a new menu\u201d.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-5548 aligncenter\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/create-new-menu.jpg\" alt=\"create new menu\" width=\"636\" height=\"197\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Now give it a name, and select \u201cCreate Menu\u201d.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"font-weight: 400;\">Step 2: Add items to the WordPress menu using the Classic Editor<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">If you haven&#8217;t previously created your WordPress pages, make sure to create them under WordPress Dashboard -&gt; Pages-&gt; Add New.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-5568 aligncenter\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/add-new-WordPress-page.jpg\" alt=\"add new WordPress page\" width=\"479\" height=\"163\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Next, all you have to do is add your desired pages, posts, blog categories to the newly created menu.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5565\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/Add-items-to-WordPress-menu.jpg\" alt=\"Add items to WordPress menu\" width=\"610\" height=\"309\" \/><\/p>\n<p><span style=\"font-weight: 400;\">If you want to add new pages to an existing menu, you can select your menu from Edit Menus.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5590\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/select-WordPress-menu.jpg\" alt=\"select WordPress menu\" width=\"500\" height=\"194\" \/><\/p>\n<h3><span style=\"font-weight: 400;\">Step 3: Select menu location in the Classic Editor<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">My current <\/span><a href=\"https:\/\/colibriwp.com\/\"><span style=\"font-weight: 400;\">Colibri theme<\/span><\/a><span style=\"font-weight: 400;\"> supports 5 menu locations:<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5584\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/menu-locations.jpg\" alt=\"WordPerss menu locations\" width=\"600\" height=\"347\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Most of the themes have similar options. Just assign your menu to the place you want it to show up. Is it the header primary menu? Are you working on a footer menu?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Once you\u2019ve selected your location, just hit \u201cSave Changes\u201d and go back to the \u201cEdit Menus\u201d section and hit \u201cSave Menu\u201d.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">That\u2019s it, you\u2019re live!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Piece of cake, don\u2019t you think?<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">How to create WordPress menus in the Customizer in 3 steps<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Another menu for building a WordPress menu is to do it inside the WordPress Customizer or any other WordPress builder. Don\u2019t forget, your options are limited by the theme you\u2019re using.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, follow the steps below to create your WordPress menu.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this particular example, I\u2019m using the Colibri theme and Colibri Builder combo.\u00a0<\/span><\/p>\n<p>If you like more visual examples, check our tutorial below.<\/p>\n<div class='embed-container'><iframe loading=\"lazy\" title=\"How to create a WordPress menu using the Customizer in less than 2 minutes\" width=\"1920\" height=\"1080\" src=\"https:\/\/www.youtube.com\/embed\/CgdHkjabVnk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<h3><span style=\"font-weight: 400;\">Step 1: Creating a simple WordPress menu in the WordPress Customizer<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">From the WordPress Dashboard head to Appearance -&gt; Customize. From the left-hand side menu, select \u201cMenus\u201d.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5586\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/Menus-in-the-WordPress-Customizer.jpg\" alt=\"Menus in the WordPress Customizer\" width=\"250\" height=\"199\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span id=\"Customizer_Menu\" style=\"font-weight: 400;\">Next, select \u201cCreate New Menu\u201d.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><img loading=\"lazy\" class=\"aligncenter wp-image-5575\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/create-menu-from-the-WordPress-Customizer.jpg\" alt=\"create menu from the WordPress Customizer\" width=\"410\" height=\"263\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">In the new section you have to:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Name your menu<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Select where to position the menu. Is it a page menu, a footer, or a header one?<img loading=\"lazy\" class=\"wp-image-5583 aligncenter\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/menu-location-in-the-WordPress-Customizer.jpg\" alt=\"menu location in the WordPress Customizer\" width=\"410\" height=\"457\" \/><\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">After that, hit \u201cNext\u201d.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"font-weight: 400;\">Step 2: Add links to your WordPress menu using the WordPress Customizer<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Here comes the most interesting part: adding the pages to the WordPress menu.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For that, you need to select \u201cAdd items\u201d.<img loading=\"lazy\" class=\"aligncenter wp-image-5566\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/Add-links-to-WordPress-menu.jpg\" alt=\"Add links to WordPress menu\" width=\"340\" height=\"543\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">A new menu will show up, with your options.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5567\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/add-menu-items.jpg\" alt=\"Add WordPress menu items\" width=\"450\" height=\"292\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Once you\u2019ve selected the items, it\u2019s time for going live!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u201cPublish\u201d is your go-to button now.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"font-weight: 400;\">Step 3: Publish your menu<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Now, \u201cPublish\u201d is your go-to button now.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You also have the option to save the menu to draft or schedule it for later.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5585\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/menu-publishing-options.jpg\" alt=\"WordPress menu publishing options\" width=\"550\" height=\"271\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Aaaand&#8230;you\u2019re done.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Easy peasy this one as well.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">One more cool thing about some WordPress builders.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You have the option to add ready-made components. Just after entering the Customizer, you\u2019ll see a \u201c+\u201d. In the search bar that shows up, in the Components menu, type \u201cmenu\u201d.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5582\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/menu-components.jpg\" alt=\"Add WordPress menu components\" width=\"610\" height=\"356\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Just drag and drop your desired menu and start styling it!<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">How to create WordPress sidebar and footer menus using widgets<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Sidebar and footer menus have different purposes.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In e-commerce websites, the left sidebar is usually used for filtering.<\/span><\/p>\n<p><span id=\"Sidebar_Menu\" style=\"font-weight: 400;\">Blogs often use right sidebar menus, where they can include the most recent posts, social media icons, videos, and more.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this blog section, I\u2019ll explain how you can customize these areas.<\/span><\/p>\n<h3><\/h3>\n<h3><span style=\"font-weight: 400;\">Step 1: Go to the WordPress Widgets area<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">In the WordPress dashboard head to Appearance -&gt; Widgets.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The widget options can differ from theme to theme.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">On the left, you\u2019ll see all your available widgets.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5594\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/widgets-to-be-added-to-sidebar-menus.jpg\" alt=\"widgets to be added to sidebar menus\" width=\"610\" height=\"523\" \/><\/p>\n<p><span style=\"font-weight: 400;\">If these aren\u2019t enough you can always install a plugin that will install new widgets for you.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, on the right side, you\u2019ll see the areas you can customize, in this particular case we have more footer areas, a pages sidebar, and a sidebar widget area.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5592\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/sidebar-and-footer-widget-areas.jpg\" alt=\"sidebar and footer widget areas\" width=\"610\" height=\"228\" \/><\/p>\n<h3><span style=\"font-weight: 400;\">Step 2: Drag and drop your widgets to your widget area<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Let\u2019s say you want a banner on the right-hand side, to use for newsletter subscription.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">What\u2019s the widget you need? A subscription-related one. If your theme doesn\u2019t have one, you\u2019ll need to find a plugin.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Because we use Mailchimp as our newsletter sending tool, we installed the plugin that lets us integrate WordPress with Mailchimp. MC4WP is the name of the plugin.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Inside the plugin, we designed our form. We didn\u2019t go for the built-in styles but used our own HTML code and styling.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"wp-image-5509 aligncenter\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/image11.png\" alt=\"Custom styling example\" width=\"610\" height=\"233\" \/><\/p>\n<p><span style=\"font-weight: 400;\">The plugin made available the \u201cMailchimp Sign-up form\u201d widget. All I had to do was to drag it to the Sidebar area and select my newsletter form.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5580\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/mailchimp-widget.jpg\" alt=\"mailchimp widget\" width=\"500\" height=\"444\" \/><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5577\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/drag-and-drop-WordPress-widget.jpg\" alt=\"drag and drop WordPress widget\" width=\"600\" height=\"477\" \/><\/p>\n<p><span style=\"font-weight: 400;\">When you look above you see the Colibri blog right sidebar. It contains the following widgets:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Search bar<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Recent posts section<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Social media icons &#8211; deployed via a plugin as well<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Mailchimp Sign-Up form<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Custom HTML &#8211; we used this built-in widget to code a banner<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">How does this look like on the actual blog (just look a bit to your right\u00a0 \ud83d\ude1c \ud83d\udc49).<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5573\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/Blog-sidebar-menu-example.jpg\" alt=\"Blog sidebar menu example\" width=\"610\" height=\"479\" \/><\/p>\n<p><span style=\"font-weight: 400;\">If you want to have your primary menu on the right-hand side, you\u2019ll have to create it as in the steps discussed in the section \u201cHow to create WordPress menus in the Classic Editor in 3 steps\u201c.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Next, go to your widgets section and drag and drop the \u201cNavigation Menu\u201d widget to your sidebar.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now it\u2019s time to select your menu. <img loading=\"lazy\" class=\"aligncenter wp-image-5589\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/Select-WordPress-menu-to-add-to-the-sidebar.jpg\" alt=\"Select WordPress menu to add to the sidebar\" width=\"500\" height=\"476\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">Important: your changes go live in real-time.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The Navigation Menu widget can be added from the Customizer\u2019s widget areas as well.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5587\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/navigation-menu-WordPress-widget.jpg\" alt=\"navigation menu WordPress widget\" width=\"500\" height=\"656\" \/><\/p>\n<h2><span style=\"font-weight: 400;\">How to create WordPress menus via plugins<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">And we\u2019ve got to our latest method of adding WordPress menus to your website.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">One thing you need to remember: the more plugins you add, the slower the website will be.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Always ask yourself if that plugin is really needed.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The value added by these plugins consists in a lot more rich media and effects options that can help you create more eye-catching menus.<\/span><\/p>\n<p><span id=\"Plugins_Menu\" style=\"font-weight: 400;\">One of the most popular plugins out there is <\/span><a href=\"https:\/\/codecanyon.net\/item\/ubermenu-wordpress-mega-menu-plugin\/154703\"><span style=\"font-weight: 400;\">UberMenu<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5593\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/uber-menu.jpg\" alt=\"uber menu\" width=\"450\" height=\"228\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Highly customizable, responsive menus can be built with UberMenu.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">From dropdown, horizontal, vertical to mega menus, you can build them all.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Lots of triggers available, custom CSS can be added as well.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, you can always compare various menu plugins in wordpress.org. Just head to plugins, and type \u201cmenu\u201d in the search bar. You will see many options, you can check the number of installs and reviews as well.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5595\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/wordpress.org-menu-plugins.jpg\" alt=\"wordpress.org menu plugins\" width=\"610\" height=\"316\" \/><\/p>\n<p><span style=\"font-weight: 400;\">There are all sorts of WordPress menu plugins available. You want to build hamburger menus, there\u2019s a plugin for that. Wanna have a sticky menu? There\u2019s another plugin for that.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">How to create sticky WordPress menus<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">If you&#8217;re lucky, your theme might support sticky menus.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If not, as I mentioned above, there\u2019s always the option of using a<\/span><a href=\"https:\/\/blog.hubspot.com\/website\/sticky-menu-wordpress\"><span style=\"font-weight: 400;\"> plugin for your sticky WordPress menu<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But if you\u2019re into CSS, you can easily write some tiny code under Appearance -&gt; Customize -&gt; Custom CSS.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Using the \u201cInspect element\u201d you will have to identify the id of your menu.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Then, your code could look like this:<\/span><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-5576\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/css-styling-sticky-menus.jpg\" alt=\"css styling - sticky WordPress menus\" width=\"335\" height=\"290\" \/><\/p>\n<p><span style=\"font-weight: 400;\">The most important lines that need to be added are the ones with<\/span> <b>z-index: 9999 &amp; position:fixed<\/b><b>.<\/b><span style=\"font-weight: 400;\"> These are the ones that affect the stickiness.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The rest of the code affects only the styling in terms of color, alignment, borders, dimensions, etc.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">Conclusions<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">It was a long one&#8230;don\u2019t you think? But it was for the greater good: for you to understand the nitty-gritty of WordPress menus.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The story can continue with custom styling, but I\u2019ll save this one for later.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s wrap it all now. Today you\u2019ve learned:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">What you can include in a WordPress menu: from pages and posts to custom links and categories.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Which are the types of menus out there, so that you can make a more informed choice.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">How to build your WordPress menu using the Classic Editor, the Customizer, WordPress widgets, plugins.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">How to create sticky\/floating menus\u00a0<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Now, if you liked this article, and you want to learn more about <a href=\"https:\/\/colibriwp.com\/blog\/how-to-build-a-wordpress-website-in-2021\/\">how to build a WordPress website<\/a>, make sure to subscribe to our <\/span><a href=\"https:\/\/www.youtube.com\/channel\/UCN3ZM-C7TJgklVfseVHamHQ\"><span style=\"font-weight: 400;\">Youtube channel<\/span><\/a><span style=\"font-weight: 400;\"> and follow us on<\/span><a href=\"https:\/\/twitter.com\/WpColibri\"><span style=\"font-weight: 400;\"> Twitter<\/span><\/a><span style=\"font-weight: 400;\"> and <\/span><a href=\"https:\/\/www.facebook.com\/ColibriWP\"><span style=\"font-weight: 400;\">Facebook!<\/span><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">You\u2019ve been served \ud83d\ude09<\/span><\/p>\n<p>[sibwp_form id=1]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you want to create a WordPress menu and don\u2019t know where to start? This article will shine a light on the types of menus available and also the methods at your disposal to build such menus. But, first things, first: &nbsp; What can you include in WordPress menus? Pages. You can add here services&hellip; <br \/> <a class=\"read-more\" href=\"https:\/\/colibriwp.com\/blog\/wordpress-menus\/\">Read more<\/a><\/p>\n","protected":false},"author":6,"featured_media":5515,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[159],"tags":[175],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WordPress Menus Beginners Guide Tips and Tricks<\/title>\n<meta name=\"description\" content=\"The anatomy of great WordPress menus: types of menus, how to build them, how to make them sticky. We&#039;ve got your back. Find out more!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/colibriwp.com\/blog\/wordpress-menus\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WordPress Menus Beginners Guide Tips and Tricks\" \/>\n<meta property=\"og:description\" content=\"The anatomy of great WordPress menus: types of menus, how to build them, how to make them sticky. We&#039;ve got your back. Find out more!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/colibriwp.com\/blog\/wordpress-menus\/\" \/>\n<meta property=\"og:site_name\" content=\"ColibriWP Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-24T12:12:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-25T14:31:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/image17.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1050\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alina Belascu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\",\"url\":\"https:\/\/colibriwp.com\/blog\/\",\"name\":\"ColibriWP Blog\",\"description\":\"WordPress know-how to boost your design skills\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/colibriwp.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-menus\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/image17.png\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/image17.png\",\"width\":1050,\"height\":700,\"caption\":\"WordPress menus\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-menus\/#webpage\",\"url\":\"https:\/\/colibriwp.com\/blog\/wordpress-menus\/\",\"name\":\"WordPress Menus Beginners Guide Tips and Tricks\",\"isPartOf\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-menus\/#primaryimage\"},\"datePublished\":\"2020-09-24T12:12:10+00:00\",\"dateModified\":\"2022-02-25T14:31:35+00:00\",\"author\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311\"},\"description\":\"The anatomy of great WordPress menus: types of menus, how to build them, how to make them sticky. We've got your back. Find out more!\",\"breadcrumb\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-menus\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/colibriwp.com\/blog\/wordpress-menus\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-menus\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/colibriwp.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The WordPress Menus Diaries: Beginners Guide (Tips and Tricks)\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311\",\"name\":\"Alina Belascu\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg\",\"caption\":\"Alina Belascu\"},\"description\":\"Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.\",\"url\":\"https:\/\/colibriwp.com\/blog\/author\/alina-belascu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WordPress Menus Beginners Guide Tips and Tricks","description":"The anatomy of great WordPress menus: types of menus, how to build them, how to make them sticky. We've got your back. Find out more!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/colibriwp.com\/blog\/wordpress-menus\/","og_locale":"en_US","og_type":"article","og_title":"WordPress Menus Beginners Guide Tips and Tricks","og_description":"The anatomy of great WordPress menus: types of menus, how to build them, how to make them sticky. We've got your back. Find out more!","og_url":"https:\/\/colibriwp.com\/blog\/wordpress-menus\/","og_site_name":"ColibriWP Blog","article_published_time":"2020-09-24T12:12:10+00:00","article_modified_time":"2022-02-25T14:31:35+00:00","og_image":[{"width":1050,"height":700,"url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/image17.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alina Belascu","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/colibriwp.com\/blog\/#website","url":"https:\/\/colibriwp.com\/blog\/","name":"ColibriWP Blog","description":"WordPress know-how to boost your design skills","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/colibriwp.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/wordpress-menus\/#primaryimage","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/image17.png","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/image17.png","width":1050,"height":700,"caption":"WordPress menus"},{"@type":"WebPage","@id":"https:\/\/colibriwp.com\/blog\/wordpress-menus\/#webpage","url":"https:\/\/colibriwp.com\/blog\/wordpress-menus\/","name":"WordPress Menus Beginners Guide Tips and Tricks","isPartOf":{"@id":"https:\/\/colibriwp.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/colibriwp.com\/blog\/wordpress-menus\/#primaryimage"},"datePublished":"2020-09-24T12:12:10+00:00","dateModified":"2022-02-25T14:31:35+00:00","author":{"@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311"},"description":"The anatomy of great WordPress menus: types of menus, how to build them, how to make them sticky. We've got your back. Find out more!","breadcrumb":{"@id":"https:\/\/colibriwp.com\/blog\/wordpress-menus\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/colibriwp.com\/blog\/wordpress-menus\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/colibriwp.com\/blog\/wordpress-menus\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/colibriwp.com\/blog\/"},{"@type":"ListItem","position":2,"name":"The WordPress Menus Diaries: Beginners Guide (Tips and Tricks)"}]},{"@type":"Person","@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311","name":"Alina Belascu","image":{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/#personlogo","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg","caption":"Alina Belascu"},"description":"Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.","url":"https:\/\/colibriwp.com\/blog\/author\/alina-belascu\/"}]}},"_links":{"self":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/5562"}],"collection":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/comments?post=5562"}],"version-history":[{"count":4,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/5562\/revisions"}],"predecessor-version":[{"id":9942,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/5562\/revisions\/9942"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media\/5515"}],"wp:attachment":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media?parent=5562"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/categories?post=5562"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/tags?post=5562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}