How to create your navigation menu on wordpress with Avada ?

Want to offer future visitors to your website an impeccable navigation menu? Congratulations !

You are in the right place since I will take care of offering you all the tips, tools and procedures to follow to obtain the appropriate result according to your needs.

Indeed, the menu of a website is a very important element for visitors, and contributes to 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 therefore have to offer an impeccable menu. So that you can do this, I am adding a video to this article that visually shows you the steps described here.

Creating a menu in WordPress

I show you in thisvideo how to create a menu in WordPress using Avada theme:

The menu: 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, even if it is very dense.

If you take a look at the top of this article, you will see the following headings:

  • TWAINO: This page redirects you automatically to the home page;
  • SEO AGENCY: Presentation of my Twaino SEO Agency;
  • SERVICES: This page presents my different services;
  • TRAINING: In this section, I tell visitors the training I offer;
  • BLOG: This page includes all my articles and videos;
  • FREE AUDIT: Takes you to a form.

As you can see, it only takes a simple click on one of these sections to automatically find yourself on its page, so it is simple and effective navigation, which 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 to the left of the page.

This provision gives it the privilege of always being visible and being quickly accessible regardless of the size of the browser window.

We can therefore say that localizing the menu in this way is part of the standard, and facilitates the user journey.

Note, however, that the menu can also be arranged vertically on the right and can be floating: this is called a mega menu.

But I strongly recommend that you do not choose this option since Internet users have already become accustomed to the two previous provisions and especially the first.

Showing originality will therefore not necessarily be a positive thing as it will only disturb them and scare them away.

On the other hand, it is sometimes useful to insert navigation zones that are independent of the main navigation menu.

Indeed, these areas can be specific to certain pages and offer users additional elements to deepen theirnavigation

These include, for example, options for refining the purchasing criteria on an e-commerce site with, for example, the presence of a filter: size, price, color, gender and many others.

Best practices for having an impeccable navigation menu

Think about the structure of your site beforehand

Before moving on to the stage of creating my menu, I first had the opportunity to design the model for my website. 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 identify the different sections that you will have in your navigation menu.

Choose the most suitable location

You have the choice between the three provisions that I mentioned a little above:

  • Menu horizontal ;
  • Vertical menu on the left;
  • Vertical right.

You can make combinations, but try to avoid redundancies in order to optimize the user experience as much as possible.

Limit the number of links

In a navigation menu, you can add the number of sections you want. But I suggest you not exceed 7 different sections.

Indeed, too much choice will lead to less readability and risks increasing the confusion of the user who will avoid your website.

Instead, consider creating submenus and using your footer to integrate some static pages like “Who are we?” », “Legal notices”, etc. In addition, make sure that your menu does not have any redundancy, such as putting the “Home” section when your logo is clickable and leads back to this page.

Choose explicit names

Another very important element is the choice of the names of your sections or “menu items” and you must ensure that they are explicit. Indeed, you must ensure that the visitor to your website immediately knows what they will find on the page and only one word is generally enough. So, instead of choosing “The blog of…. » take “blog” or “our rentals” instead of “our furniture rentals…..”.

Moreover, choose names that are really meaningful for your activity. For example, if I only put “Services”, this does not allow visitors to know at first glance that I offer SEO services and training.

Order the links in your menu correctly

Another very important aspect remains the order of display of links in your navigation menu. I suggest you put the most important pages or the heart of your activity first. The custom is to put the “Find us” or “Contact us” pages at the end and Internet users are already well accustomed to this provision.

Remain 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. You will thus offer a coherent site and facilitate navigation for Internet users who will be able to follow you easily.

Create your own menu on WordPress: the steps to follow with the Avada theme

I will use the model that I created with the softwareAdobe Illustrator to create the menu for my website

Indeed, this model allows me to have a precise idea of ​​the expected result and therefore to know how to proceed exactly.

Presentation Maquette

Additionally, note that I will be using the “Avada” theme that I installed and that the entire process is based on it. Depending on the themes you have, you’re probably not going to have the exact same interfaces as me. However, you have the option to adapt the process to suit your own theme.

Maquette a implementer

It is important to note that the creation of the navigation menu involves two main stages including:

  • Adding your logo;
  • Creating sections of your navigation menu ormoney menus  (list of sub-elements) and its design.

So I will first show you how to add your logo to the navigation bar in your header.Insecondly, I show you how to configure and designate the sections of your navigation menu.

Let’s go then!

Log in to your site’s “Admin” account

Before beginning either of the two main steps, you must first log in to your website administrator account to access the WordPress Dashboard. Therefore, all you need to do is add “…./wp-admin” to the URL of your website. Then fill in the boxes with your identifiers and validate.

Menu avant intervention

Add your logo to the navigation menu: the steps to follow

For my demo theme “Avada SEO”, there is already a default logo. So what I’m going to do is change this logo and put mine in its place.

1) Go to your theme options

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 elements.

Se rendre sur thème option

2) Choose the type of logo to change

On this new page, click on the “Logo” option onthe second left sidebar. You then have two subsections including:

  • Logo: this is the classic navigation menu logo;
  • Favicon: this is the small icon that appears on browser tabs. This allows the Internet 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, you click on the “Logo” subsection and scroll down to the “Default Logo” option. At this level, click on the “Upload” button to replace your logo.

Sélectionner les logos

I would like to point out to you here that on the interface that appears, you can directly see the size of the current logo to have a precise idea of ​​the size needed for your logo to correctly fill the space that ‘occupies this one.

Définir le logo par default

To do this, look at its details which are presented in the right sidebar.

Vérifier les tailles des images afin de vous en inspirer

At my level, I have 165 x 41 pixels and if you created your logo yourself, you can easily modify its size as I will do with Adobe Illustrator in the video.

Enregistrer les logos a la bonne taille

If you haven’t designed it, just communicate the sizes to your graphic designer so they can do so.

Créer des logos a la bonne taille

If your logo is already ready, press the “Upload files” window which allows you to directly download the logo from your computer. You have two choices:

  • Directly drag and drop the logo file onto the page;
  • Click on the “Select files” button to manually search for the logo in 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 saying “Twaino-logo 1x” and then press the blue button at the bottom “Select”.

Uploader les logos

My logo takes the place of the default logo.

Uploader les autres logos
3-2) Change the other variations of the default logo
3-2-1) Retina Default Logo

Then go to “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.

Creer les logos

I first save to see if the changes have actually been taken into account. For this, I mustreturn to the home page of my website and of course in another tab.

To do it simply, go to the top left corner and click on the house icon followed by the demo theme name “Avada SEO”. Then press “Go to site” which takes you directly to the home page, in another browser tab.

Enregistrer les parametres

I can see that the default logo has been replaced by my logo.

3-2-2) Sticky Header Logo

I continue the modifications this time with “Sticky Header Logo”. Indeed, a sticky header is a menu that will remain “fixed” at the top of your page, even when you go down while browsing/reading.

Vérifier le logo dans le menu

At this level, I have two options including “Sticky Header Logo” and “Retina Sticky Header Logo”. Note that stickers are very interesting elements on a website and which will be the subject of another article.

I proceed in the same way as before to replace these default logos. Except this time, I just have to select the corresponding logos in the “Media Library”. Try to select the chosen logo from “Default Logo” to “Sticky Header Logo” and “Retina Default Logo” to “Retina Sticky Header Logo”.

3-2-3) Mobile Logo

Right at the bottom of “Sticky Header Logo” there is “Mobile Logo” and you also need to change the default logos it includes.

Se rendre sur favicon

Proceed in exactly the same way as in the previous step and take care to choose the same “Default Logo” logo for “Mobile Logo” and the “Retina Default Logo” logo for “Retina Mobile Logo”. Then save by clicking on the blue “Save” button which is located at the bottom.

4) Change the Flavicon

Then click on the “Flavicon” subsection of the “Logo” menu to change the Flavicon of your website. Indeed, a Flavicon is a small image that is located in the bar of your search browser. This is a small image that will help Internet users very easily identify your website in a browser.

On the page that opens, you will see three different options with the appropriate dimensions for each of them. It is :

  • 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 ;
Créer les favicon a la bonne taille

You will therefore proceed to modify the size of your logo to have these three different formats. In my case, I do it quickly with Adobe Illustrator software.

Respecter les tailles des favicons

Then, simply click on each “Upload” button to upload the logo corresponding to each option.

Charger les favicons

By adding these logos, you will notice that there are other options added. Just modify your logo again in order to upload them too. I advise you to do everything at once so as not to leave anything that could probably cause you trouble later.

After loading 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 your browser tab.

Se rendre sur personnaliser le menu

My logo appears well in my browser and as everything seems perfect, I move on to creating the sections for my navigation menu.

Creation of navigation menu sections: the steps to follow

There are two different ways to create the navigation menu:

  • From the home page;
  • From the “Avada” theme.

The first is actually a navigationproposed failing that 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 connected to your administrator account, you will go to the home page.

Se rendre sur personnaliser le menu

Then click on the “Personalize” button followed by a brush and which is located at the top and to the left of the update icon.

Verifier les elements du menu

On the interface that appears, tap the “Menu” section located on the left sidebar.

Selectionner le bon menu

I then click on the name of the menu “SEO Main Menu” in my situation.

Acceder au menu

An interface then follows where all the categories of the default navigation menu are located. By clicking on “+ Add elements” you will be able to add other sections to those that already exist. You can also reorder them by clicking on “Rearrange”.

Modifier ou deplacer les elements si beoin

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 stages including:

  • Creation of the menu (with text);
  • Le design du menu.
1) Creating the menu (with text)

This step allows you to display the different sections that you want to have in your navigation menu.

1-1) Access the menu configuration page

There are two possibilities to go to the menu configuration page:

-From the home page, click on the “Avada SEO” window and in the menu that appears, select “Menu”;

Modifier ou deplacer les elements si beoin

-In the Dashboard, you must click on the “Appearance” section and then on the “Menu” option.

Apparence menus creer un menu
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 indicate the name of the menu you want to add then press the blue “Create menu” button which is located just to the right. For my website, I create the “Twaino” menu.

Créer un nouveau menu
Selectionner ce nouveau menu

You can now configure your new menu and different options are offered:

  • Main Navigation: Allows you to make it your main menu;
  • Top Navigation: Allows it to appear on the bar located 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.
Inserer des pages dans le menu

In my case, I select the first option and the last for my “Twaino” menu.

1-3) Then create the menus

After creating this main menu, you can create the menus that will appear on the navigation bar.

Vérifier le menu dans la maquette

To do this, several options will be available to you to add items to the menu:

  • Add a recent page: You will be able to choose in this section a page that you wish to integrate into your menu;
  • Add an article: WordPress gives you the possibility to add an article to your menu with this option;
  • Add a custom link: If you want to send your visitors to a particular page on your site or to an external site, you can use this option by adding the URL of your choice;
  • Add a category: To navigate a site, it may be interesting to add a category to 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 do this, I will add “custom links”. Obviously, once all my pages are built correctly, I will have the opportunity to change my menu to make it perfectly clean.

Creation section agence SEO

For the purposes of my video and this tutorial, I’m going to click on “Custom Links” which is just at the bottom of “Articles” in the sidebar just to the left and labeled “Add Posts” at the top. menu items”.

Inserer des liens personnalises

Take care to first indicate the link to your site in the “Web address” section. Don’t forget to complete the “s” in “http” if you have already switched to HTTPS.

Ajouts des elements du menu

In the “Link text” section, enter the names of the menus you want to have. At my level, I write “ » and successively the following names:

  • BLOG ;

Then you click on the blue “Save Menu” button which is located just at the bottom to have a first preview.

Enregistrer le menu

If you go to the home page of your website, you will notice that the menus have actually appeared as I have on the home page of my website. The next step is to modify the design of the current menu to achieve the desired result.

Verification du menu
2) The design of your menu

To have the desired design for your menu, you will go to your theme options.

Se rendre sur theme option

To do this, go to “Avada” in the left sidebar of your dashboard and click on “Theme options” then “Menu”.

Aller sur menu

On the interface that appears, you have all the options to “design” your menu.

2-1) Change menu text color

First click on the “Main menu” section then scroll down to “Main Menu Font Hover/Active Color”.

Texte du menu en blanc

Press “Select a color” and choose the color you want to give to your menu names.

Changer la couleur

I take the white one given the model that I established previously. 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.

Verification couleur du menu
2-2) Put a colored button under a menu

For my “FREE AUDIT” menu, I want to place a colored button below to make it stand out from 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 sideright to unroll it.

Changer la couleur du bouton

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 an average size.

Sélectionner la taille du bouton

You can also integrate aicon 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 and paste it in the corresponding part to have exactly the color I want.

Advanced Fusion builder elements
Choisir la bonne typographie Gudea
Aller sur button element

After these configurations, validate them by pressing “Save menu”.

Enregistrer les changements

Refresh your home page and you will see that the button has indeed appeared.

Changer la couleur des boutons

I do have the “FREE AUDIT” menu which is located on a colored button. However, sometimes the color does not correspond to what we want to have.

Verifier les couleurs sur le site
2-3) Change the color and font of your menu button

If you followed the previous steps without having 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 will change the font of the “FREE AUDIT” button. To do this, go to “Button typography” and select the “Font Family” that suits you. I take “Gudea” given the layout of my website.

In 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 saved the changes and there was a change in button color and menu font.

2-4) Select your menu style

Go to the “Theme Options” menu of your theme and click on “Header” then “Header Content”.

Selection du Menu et Top Menu

You therefore have the choice between several menu styles, it’s up to you to make the choice based on what you want to have.

Choisir le bon format de menu

Additionally, there are some configurations you can already do here.

Changement du texte du top menu

This involves adding the telephone number and your email by going to the “Phone number for Contact info” and “Email Address for Contact info” option.

Il manque les reseaux sociaux

Also, at the level of “Header Content 2” select “Social Links” if you want, like me, to directly insert the links of your social network accounts at the very top of your website.

Ajouter les reseaux sociaux dans le top header

At the end, validate the changes by clicking on the blue “Save Changes” button.

Vérification du top header avec reseaux sociaux
2-5) Activate Sticky Header
Enregistrement du top menu

Still at the “Header” level, click on “Sticky Header” and press “On”.

Activation du sticky header

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”.

Modifier le header styling

Select the color you want to have and go to “Header Top Background Color” to change the color of the “Top Header” including the social network links.

Header background de la bonne couleur
Changement couleur du header

Save the changes by saving.

Verification de la couleur du header
2-7) Change the size and colors of the “Top Header” texts

To perform this operation, 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 for the three parameters:

  • Secondary Menu Font Color ;
  • Secondary Menu Dropdown Font Color ;
  • Secondary Menu Dropdown Font Hover Color.

To change the size of writings, simply go to the “Secondary Menu Font Size” setting.

Modifier parametrage sticky header

Indicate the size you want and don’t hesitate to experiment to get the best result. Then save these changes to have a preview.

Changement couleur Sticky header

And There you go ! I have just finished creating the navigation menu for my website. As you can see, the result is almost the same as my website mockup.

Verification sticky header

In summary

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, there remains a very important element that should not be taken lightly.

To do this, I strongly recommend that you establish a mock-up of your website in advance, which saves a lot of time during this step.

And for good reason, you will know exactly what you want to achieve, and all you have to do is use the process described above to achieve the desired result.

Don’t hesitate to experiment a little since it sometimes happens that different options influence the same setting, as was the case with the color of the button in my “FREE AUDIT” menu.

Leave a comment