Do you want to offer your future website visitors an impeccable navigation menu? Congratulations! You’re at the right place because I’m going to offer you all the tips, tools and steps to follow to get the right result for your needs. Indeed, the menu of a website is a very important element for the visitors, and participates in a good user experience. And for good reason, the menu allows you to have a global view as well as all the sections of the website. It is therefore an element that allows Internet users to determine whether or not they will continue their visit. You must therefore offer a perfect menu. So that you can do it, I add to this article a video that shows you visually the steps described here.
Creating a menu in WordPress
I show you in this videohow to create a menu in WordPress using the Avada theme:
The menu: An essential tool for navigation
The menu of a website or the navigation bar is the element that allows you to easily browse the pages of a website and even if it is very dense. If you take a look at the top of this article, you will see with the following headings:
- TWAINO : This page automatically redirects you to the home page ;
- SEO AGENCY : Presentation of my SEO Agency Twaino ;
- SERVICES : This page presents my different services;
- TRAININGS : In this section, I indicate to the visitors the trainings that I propose;
- BLOG : This page includes all my articles and videos;
- FREE AUDIT : This page leads you to a form.
As you can see, a simple click on one of these sections will automatically take you to its page, so it’s a simple and efficient navigation that visitors will appreciate. This is exactly the main role of the menu or navigation bar of a website.
What are the best places to position your menu?
Always placed in the same place from one page to another, the navigation menu is generally arranged in two places:
- Horizontally at the top of the page;
- Vertically on the left side of the page.
This arrangement offers the privilege of always being visible and of being quickly accessible regardless of the size of the browser window. We can therefore say that locating the menu in this way has become the norm, and facilitates the user’s path.
Note however that the menu can also be arranged vertically on the right. But I strongly recommend you not to choose this option since the users are already used to the two previous arrangements and especially to the first one. Showing originality will not necessarily be a positive thing as it will only confuse them and make them run away.
On the other hand, it is sometimes useful to insert navigation areas that are independent of the main navigation menu. In fact, these areas can be specific to certain pages and offer users additional elements to deepen their navigation. For example, these are options for refining the purchase criteria on an e-commerce site with, for example, the presence of filters: size, price, color, gender and many others.
Best practices to have an impeccable navigation menu
Think about the structure of your site beforehand
Before going to the step of creating my menu, I had the opportunity to design the layout of my website Twaino.com. I advise you to do the same for several reasons that I mentioned in my article on the subject, which also includes the process to follow to successfully design your website.
This step allows you to create the tree structure of your website and to identify the different sections that you will have in your navigation menu.
Choose the most appropriate location
You can choose between the three layouts I mentioned above:
- Horizontal menu;
- Vertical menu on the left;
- Vertical right.
You can make combinations, but try to avoid redundancy in order to optimize the user experience.
Limit the number of links
In a navigation menu, you have the possibility to add the number of headings you want. But I suggest you not to exceed 7 different sections. Indeed, a too important choice will generate a lesser readability and risks to increase the confusion of the user who will flee your website.
Instead, think about creating sub-menus and using your footer to integrate some static pages such as “Who we are”, “Legal Notice”, etc. In addition, make sure that your menu does not contain any redundancy, such as putting the “Home” section when your logo is clickable and takes you back to this page.
Choose explicit names
Another very important element is the choice of the names of your sections and you must ensure that they are explicit. Indeed, you must make sure that the visitor of your website knows immediately what he will find on the page and a single word is usually enough. So, instead of choosing “The blog of ….”, choose “blog” or “our rentals” instead of “our furniture rentals …..”.
Also, choose names that are really meaningful for your business. For example, if I put only “Services”, it does not allow visitors to know at first glance that I offer SEO services, training.
How to order the links of your menu
Another very important aspect is the order in which the links are displayed in your navigation menu. I suggest that you put the most important pages or the heart of your business first. It is customary to put the “Find us” or “Contact us” pages at the end and Internet users have already become accustomed to this layout.
Stay consistent on the different pages of your site
It is possible to have menus on certain pages that differ in terms of layout and order.
But I recommend that you keep the main menu and if necessary add a secondary menu specific to certain pages. This way, you will offer a coherent site and make it easier for visitors to follow you.
Create your own menu on WordPress: the steps to follow with the Avada theme
I will use the template I created with Adobe Illustrator to create the menu of my website Twaino.com. Indeed, this mockup allows me to have a precise idea of the expected result and therefore to know how to proceed exactly.
Also, note that I will use the theme “Avada” that I have installed and that the whole process is based on it. Depending on the theme you have, you will probably not have exactly the same interfaces as I do. However, you do have the ability to adapt the process to your own theme.
It is important to note that creating the navigation menu goes through two major steps including:
- Adding your logo;
- The creation of your navigation menu and its design.
I will first show you how to add your logo on the navigation bar. In a second step, I will show you how to configure and design the sections of your navigation menu.
Let’s go then!
Log in to your site’s “Admin” account
Before starting either of the two main steps, you must first log into your website’s admin account to access the WordPress Dashboard. To do this, simply add “…./wp-admin” to your website’s URL. Then fill in the boxes with your credentials and validate.
Add your logo to the navigation menu: the steps to follow
For my demo theme “Avada SEO”, there is already a logo by default. So what I will do is to change this logo and put mine instead.
1) Go to the options of your theme
On my dashboard, I go to the “Avada” section, which is my theme, and in the menu that appears, I choose “Theme Options” which offers me a configuration space with several items.
2) Choose the type of logo to change
On this new page, click on the “Logo” option on the second left sidebar. You then have two subsections including :
- Logo: this is the classic logo of the navigation menu;
- Favicon: this is the small icon that is displayed on the tabs of browsers. This allows the user to identify the tab of your website, even if it is on another website.
3) Change the default logo and its variations
3-1) Change ” Default Logo
To change the default logo, click on the sub-section ” Logo ” and scroll down to the option ” Default Logo “. At this point, click on the “Upload” button to put your logo instead.
I would like to point out here that on the interface that appears, you can directly see the size of the current logo to have a clear idea of the size that it takes for your logo to properly fill the space it occupies.
To do this, look at its details which are presented in the right sidebar
At my level, I have 165 x 41 pixels and if you designed your logo yourself, you can easily change its size as I will do with Adobe Illustrator in the video
If you didn’t design it, just give the sizes to your graphic designer to do so.
In case your logo is already ready, press the “Upload Files” window that allows you to go directly to your computer and get the logo. You have two choices:
- Drag and drop the logo file directly onto the page;
- Click on the “Select Files” button to manually fetch the logo from your folders.
I choose the second option and my logo loads into the “Media Library” of my website. Here you have the opportunity to name your logo, which I do by indicating “Twaino-logo 1x”, then I press the blue button at the bottom “Select”.
My logo takes the place of the default logo.
3-2) Change the other variations of the default logo
3-2-1) Retina Default Logo
Then go to the level of “Retina Default Logo” and click on “Upload” to change it. I proceed in the same way as before by taking the exact dimensions to adjust my logo. I upload it to the “Media Library”, name it “Twaino-logo 2x” and select it.
I save it first to see if the changes have been taken into account. To do this, I have to go to the home page of my website and of course to another tab.
To do this simply, go to the top left corner and click on the house icon followed by the name of the demo theme “Avada SEO”. Then press “Go to Site” which takes you directly to the home page in another browser tab.
I notice that the default logo has been replaced by my logo.
3-2-2) Sticky Header Logo
I continue the modifications with this time “Sticky Header Logo”. Indeed, a sticky header is a menu that will remain “fixed” at the top of your page, and this even when you go down during the navigation / reading.
At this level, I have two options including “Sticky Header Logo” and “Retina Sticky Header Logo”. Note that the stickers are very interesting elements on a website and will be the subject of another article.
I proceed in the same way as before to replace these logos by default. Except that this time, I just have to select the corresponding logos in the “Media Library”. Try to select the chosen logo from “Default Logo” for “Sticky Header Logo” and the one from “Retina Default Logo” for “Retina Sticky Header Logo”.
3-2-3) Mobile Logo
Just below “Sticky Header Logo”, there is “Mobile Logo” and you must also change the default logos it includes.
Proceed exactly the same way as in the previous step and take care to choose the same logo of “Default Logo” for “Mobile Logo” and the logo of “Retina Default Logo” for “Retina Mobile Logo” Then save by clicking on the blue “Save” button at the bottom.
4) Change the Flavicon
Then click on the sub-section ” Flavicon ” of the menu ” Logo ” to change the Flavicon of your website. Indeed, a Flavicon is a small image that can be found in the bar of your search browser. It is a small image that will help Internet users to identify your website very easily in a browser.
On the page that opens, you will see three different options with the appropriate dimensions for each. These are :
- Flavicon: a size of 16 px x 16 px or 32 px x 32 px ;
- Apple iPhone Icon Upload: 57 px x 57 px ;
- Apple iPad Icon Upload: 72 px x 72 px ;
So you will proceed to change the size of your logo to have these three different formats. In my case, I do it quickly with Adobe Illustrator.
Then, you just have to click on each button “Upload” to upload the logo corresponding to each option.
As you add these logos, you’ll see that there are more options added. You just have to modify your logo again to upload them too. I advise you to do everything at once so that you don’t leave anything that could probably get you into trouble later.
After uploading all the logos, click on the blue “Save changes” button at the bottom to save the changes. If you go to the home page of your website, you will see that your logo appears in the tab of your browser.
My logo appears in my browser and as everything seems to be perfect, I move on to the creation of my navigation menu items.
Creating the navigation menu items: the steps to follow
There are two different ways to create the navigation menu:
- From the home page;
- From the “Avada” theme.
The first one is actually a default navigation proposed by WordPress and personally I don’t necessarily use this method, but I find it interesting to present it to you.
From the home page
Still logged into your admin account, you will go to the home page.
Then click on the “Customize” button followed by a paintbrush and which is located at the top left of the update icon.
On the interface that appears, press on the “Menu” section that is on the left sidebar.
I then click on the menu name “SEO Main Menu” in my situation.
Then follows an interface where all categories of the default navigation menu are found. By clicking on “+ Add Items” you will be able to add more categories to the existing ones. You can also reorganize them by clicking on “Reorganize”.
Configuring the navigation menu with Avada
This method allows you to configure your navigation menu much more precisely. This is the main reason why I personally prefer it to the previous one. Note that at this level, I distinguish two main steps including :
- The creation of the menu (with the text);
- The design of the menu.
1) The creation of the menu (with the text)
This step allows you to create the different headings you want to have in your navigation menu.
1-1) Go to the menu configuration page
There are two ways to get to the menu configuration page:
-From the home page, click on the “Avada SEO” window and in the menu that appears, select “Menu” ;
-In the Dashboard, click on the “Appearance” section and then on the “Menu” option.
1-2) Create a new main menu
On the configuration interface, click on “Create a new menu” which is located just at the bottom of the “Edit menus” window. Then enter the name of the menu you want to add and press the blue button “Create a menu” which is just on the right. For my website, I create the menu “Twaino”.
You can now configure your new menu and different options are proposed:
- Main Navigation: Allows you to make it your main menu;
- Top Navigation: Allows you to make it appear on the bar that is just above the navigation menu bar
- Mobile Navigation: Allows you to create specific menus for mobile navigation;
- 404 useful pages: For 404 error pages;
- Sticky Header Navigation: Allows you to integrate it into the menu that appears when you scroll down your site.
In my case, I select the first option and the last one for my menu “Twaino”.
1-3) Then create the menus
After creating the main menu, you can create the menus that will appear on the navigation bar.
To do this, you have several options for adding items to the menu:
- Add a recent page : You will be able to choose in this section a page that you want to integrate into your menu;
- Add an article: WordPress gives you the possibility to add an article in your menu with this option;
- Add a custom link: If you want to send your visitors to a particular page of your site or to an external site, you can use this option by adding the URL of your choice;
- Add a category: To navigate on a site, it can be interesting to add a category in the menu.
In my case, since my website has just been created, I don’t necessarily have the pages and articles that exist. Therefore, in order to show you how to proceed, I will add “custom links”. Of course, once all my pages are built correctly, I will have the opportunity to change my menu to make it perfectly clean.
For the purposes of my video and this tutorial, I’m going to click on “Custom Links” which is right at the bottom of “Articles” on the sidebar just to the left and labeled “Add Menu Items” at the top.
Be sure to first indicate the link to your site in the “Web Address” section. Do not forget to complete the ”s” to ”http” if you have already switched to HTTPS.
In the “Link text”, enter the names of the menus you want to have. At my level, I enter ” https://twaino.com “and successively the following names:
- SEO AGENCY ;
- SERVICES ;
- BLOG ;
- FREE AUDIT.
Then, you click on the blue “Save Menu” button right at the bottom to get a first look
If you go to the home page of your website, you will notice that the menus have indeed appeared as I have on the home page of my website. The next step is to modify the design of the current menu to get the desired result
2) The design of your menu
To have the desired design for your menu, you will go to the options of your theme.
To do this, go to “Avada” in the left sidebar of your dashboard and click on “Theme options” and then on “Menu”
On the interface that appears, you have all the options to “design” your menu.
2-1) Change the color of the menu text
First click on “Main menu” and then scroll down to “Main Menu Font Hover/Active Color”.
Press “Select Color” and choose the color you want to give to your menu names.
I’ll use white because of the layout I made beforehand. Validate this modification by clicking on the “Save Changes” button and go to the home page of your website to see this change. In my case, I have all the names of my menus in white.
2-2) Put a colored button under a menu
For my “FREE AUDIT” menu, I want to put a colored button underneath to make it stand out from the other menus. If you want to do this too, go to the “Appearance” section located on the left sidebar of the dashboard. Then click on “Menus” and on the menu bar in question, press the arrow on the right side to make it drop down.
Select the blue “Avada Menu Option” button which takes you to the configuration interface. At the “Menu First Level Style” level, you can choose the size of the button. I choose “Button Medium” to have a medium size.
You can also integrate an icon and change the color of the button. For the last point, click on “Select a color” which is in front of the “Menu Highlight Label Background Color” option. Choose the color that suits you, but as I already have a color to use, I simply copy its code that I paste in the corresponding part to have exactly the color I want.
After these configurations, validate them by pressing “Save menu”.
Refresh your home page and you will see that the button has indeed appeared
I have the “FREE AUDIT” menu on a colored button. However, sometimes the color doesn’t match what you want to have.
2-3) Change the color and font of your menu button
If you have followed the previous steps without getting the color you want, you may have an option that is still active. To do this, go to the “Theme Options” menu of your theme and click on “Fusion Builder Elements” then “Button Element”
You then have the different configurations for the buttons on your website.
First, I’m going to change the font of the “FREE AUDIT” button. To do this, go to “Button typography” and select the “Font Family” that suits you. I choose “Gudea” because of the layout of my website.
In the second position, I change the color of the button by going to the different “Button Gradien” to choose the color I want to have. I save the changes and there was indeed the change of button color and menu font.
2-4) Select the style of your menu
Go to the “Theme Options” menu of your theme and click on “Header” then on “Header Content”
You have the choice between several menu styles, it’s up to you to make the choice according to what you want to have
In addition, there are some configurations you can already do here.
These include adding your phone number and email by going to the “Phone number for Contact info” and “Email Address for Contact info” options.
Also, at the level of “Header Content 2” select “Social Links” if you want, like me, to insert directly the links of your social network accounts at the top of your website.
At the end, validate the changes by clicking on the blue button “Save Changes”.
2-5) Activate Sticky Header
Still at the “Header” level, click on “Sticky Header” and press “On”
Then save and go to the home page of your website to see the changes that have been made.
2-6) Change the color of your header
To change the color of your header, go to “Header Styling” and scroll down to “Header Background Color”.
Select the color you would like to have and scroll down to “Header Top Background Color” to change the color of the “Top Header” including the social network links.
Save the changes by saving.
2-7) Change the size and colors of the texts of the ” Top Header “
To do this, click on the “Secondary Top Menu” option in the “Menu” section of “Theme Options”. Once on the page, scroll down and choose the colors you want to have in the three parameters:
- Secondary Menu Font Color;
- Secondary Menu Dropdown Font Color ;
- Secondary Menu Dropdown Font Hover Color.
To change the size of the text, simply go to the “Secondary Menu Font Size” parameter
Specify the size you want and feel free to experiment to get the best result. Then save these changes to preview.
That’s it! I just finished creating the navigation menu for my website. As you can see, the result is almost the same as the one of my website mockup.
The navigation menu is one of the first elements to put in place when you start creating a website. But although its realization is not extremely complicated, as you have seen, it remains a very important element that should not be taken lightly. For this reason, I strongly recommend that you establish a model of your website in advance, which will save a lot of time during this stage. And for good reason, you will know exactly what you want to achieve, and you will only have to use the process described above to achieve the desired result. Don’t hesitate to experiment a little because sometimes different options affect the same setting as was the case with the color of the button in my “FREE AUDIT” menu.