How to create a menu in WordPress, how to customize the header of a site made with the Divi theme, where to find customization options etc.... So many questions that will find answers in this article. I offer you a complete file on Divi's headers and menus. Here is the program:

  1. Create the main menu of your WordPress site
  2. Delete Divi's logo and add your own
  3. Choose the type of header proposed by Divi
  4. Define the appearance of menu items
  5. Some tips to customize your Divi main menu
  6. Resources to modify the Divi menu

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

Before you can customize the header and the Divi menu, you must have the elements to appear in the main navigation of your site. These elements can be:

  • pages,
  • of the articles,
  • links,
  • of categories,
  • labels.

Step 1: Create menu items

The first step is to create pages (home, services, contact, about etc...) and possibly blog categories. These items must have the status "published" in order to be used within your main menu. You will therefore not be able to add pages with the status of "draft" to your menu.

Step 2: Create your main menu

Go to the Appearance tab > Menu. Simply enter the name of your menu in the dedicated field and click on "Create menu".

Create a WordPress navigation menu
Create a WordPress navigation menu

Once you have created your menu, you will be able to check the items to add to your menu. The list of available items is on the left side of the screen. These elements are classified by typology (pages, articles, personalized links, categories).

Simply check the desired items (those you have published/created upstream) and then click on Add to menu.

Step 3: Organize the structure of the main menu

You can drag and drop each menu item to re-order them. The highest element will be the leftmost element of your main menu - the lowest element will be the most rightmost element.

If you shift one of your elements to the right, it will become a sub-element.

Step 4: Assign a location to your menu

Don't forget to assign a location to your menu. Otherwise, your menu will not be visible on the front side (visitor side). Check the "Main Menu" box.

Finally, save the menu and then go to the front office to check how your menu appears.

To better understand, watch this summary video:

Note: the creation of a main menu of a site does not depend on a theme, it is a native feature of WordPress. However, the appearance of the main navigation depends on the theme you are using. And this is what we will see in the rest of this article.

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE"

Now that your main menu is created, you will be able to customize it.

Insert your logo in the Divi main menu
Insert your logo in the Divi main menu

Then go to the Divi tab > Theme Options > Logo. Click on Upload and choose your image from the library or download it from your computer.

This step is simple....

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Now you have all the cards in hand to start defining the type of header you prefer.

Go to the Appearance tab > Customize > Header and Navigation > Header Format.

In the drop-down menu, Divi offers you 5 types of headers:

  • Default
  • Centered
  • In-line logo centered
  • Slide In
  • Full Screen

From your choice will come different configuration options that we will see in detail.

Default Divide Menu
Default Divide Menu

This is what the main menu of a WordPress site that uses the default Divi header looks like. The logo is located on the left and the elements that make up your navigation follow each other with a right alignment.

This default header has several options:

Option 1: "Hide navigation bar if no scrolling"

If you check this option, the main menu will only appear when the user scrolls down the page.

When the user is at the top of the page, the navigation disappears.

This option can be confusing for the Internet user: if he is not comfortable with the Internet, he will not necessarily have the idea of scrolling your page to make navigation appear and could leave your site before he has even visited another page. This could then have consequences on your rebound rate.

For my part, I never tick this option, unless design constraints are imposed on me.

Option 2: "Enable vertical navigation"

vertical navigation Divi
Default Divi header option: vertical navigation to the right or left

The default header also provides fixed and lateral navigation. This option allows you to place the lateral navigation to the right or left. The rendering is quite nice and the logo will be placed at the top of the navigation.

Centered Divide Menu
Divi Menu - Centered

The centered header displays the logo in the center of your page. The menu items will be centered just below the logo. This design type is ideal if you use a headband logo. You can also be creative by preparing a special banner for your header using software such as PhotoShop or Affinity for example.

The centered header also offers the same options as the default header, namely:

  • "Enable vertical navigation": in this case, the side menu will look like the default side menu except that the navigation elements will be centered instead of aligned to the left.
  • "Hide navigation bar if no scrolling"
Divi Menu - Centered Inline Logo
Divi Menu - Centered Inline Logo

The inline logo header centered, as you can see from the screenshot above, places your logo at the center of the elements that make up the navigation.

This kind of design can be valid if the elements of your navigation are even in number and if they have a more or less similar number of characters. Indeed, depending on the elements of your menu, the logo may not be centered and would then propose an inconsistency in the harmony of the design.

Slide In Menu
Divi Menu - Slide In

The Slide In header, as its name suggests, offers a menu that slides to the right when the user clicks on the menu icon (the hamburger). Besides, if you don't like this hamburger, you can use a free plugin to change your appearance.

By default the background of this menu is blue, but don't worry, you can customize this menu in the Appearance tab > Customize > Header and Navigation > Slide In & Header Settings full screen.

Slide In Divi menu
Option to customize the Divi Slide In menu

In the menu options of the Slide In type menu, you can:

  1. Show or not the search bar
  2. Define the width of the menu
  3. Define the size of the various fonts
  4. Choose the font from the menu
  5. Select the background color as well as the color of the menu links.
Full Screen Menu
Divi Menu - Full Screen

Divi's full screen header is an overlay header. When the user clicks on the menu icon, the screen is completely covered and the menu items appear.

The customization options are the same as those in the Slide In menu. You can also decide on the opacity of the background color.

Need more resources on Divi? Visit ElegantThemes' blog full of ideas and tutorials!

Now that you have chosen the header type, you will be able to define the appearance of the items in your menu.

Most of Divi's options are found in the Appearance tab > Customize > Header and Navigation > Primary Menu Bar. From this tab, you will be able to:

  • define the menu in "full width" mode
  • hide the logo image in the menu
  • define the height of the menu
  • define the height of the logo
  • choose the font size and letter spacing
  • define the font and its appearance (bold, italic, capital letters, etc.)
  • define the color of your menu items (text color, active link color, sub-element color)
  • choose a background color for the main menu as well as for the drop-down menus
  • choose the color of the drop-down menu line and the animation of this menu.

For "Slide In" and "Full Screen" headers, you can find some of these options in the Appearance tab > Customize > Header and Navigation > Slide In & Header Settings Full Screen.

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Although Divi allows you to easily define the design of your site using its options, you may want to go beyond that. Here are some tips that may be of interest to you:

Tip n°1: delete the grey line under the menu

You noticed her, didn't you? This thin grey line that delimits Divi's menu... Do you want to get rid of it? It's very simple, go to the Appearance tab > Customize > Additional CSS and add this simple piece of code:

/* supprimer la ligne grise sous le menu principal de Divi */
#main-header {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

Still in the tab Appearance > Customize > Additional CSS you can add this code. Note that you can adapt it to the needs of your background image:

/* ajouter une image en fond du menu principal */

#main-header {
background-size: initial;
background-repeat: no-repeat;
background-image: url(ajoutez ici l'URL de votre image) !important;
background-position: center;
}

With this simple piece of CSS code, you can display a line that appears when you hover over each element that makes up the Divi menu:

/* ajouter une ligne au survol des éléments du menu */

#top-menu .current-menu-item a::before {
-webkit-transform: translateY(15px);
transform: translateY(15px);
opacity: 1.0;
}

#top-menu li a:hover:before {
-webkit-transform: translateY(15px);
transform: translateY(15px);
opacity: 1;
}

#top-menu li a:before {
content: '';
position: absolute;
top: 3px;
left: 0;
background: #666666; /* changez le code couleur HTML à votre convenance */
width: 100%;
height: 2px;
-webkit-transform: translateY(24px);
transform: translateY(24px);
opacity: 0;
transition: 0.3s ease;
}

This line, which appears when the mouse hovers, can be easily modified with CSS... For more possibilities, here is a tutorial that proposes 3 original ways to animate your Divi menu items when the mouse hovers over it.

Insert images in the Divi main menu
Here is an example of a main menu (navigation) containing images to illustrate my blog categories

To add images to the Divi mega menu, go to this tutorial or consult the official documentation concerning the creation of a mega menu simple (without images).

It is very easy to delete the main menu of a page or site made with Divi. With two clicks or a little CSS, you can delete its display on a single page or on the entire site. Discover the tutorial to hide the Divi menu.

To achieve this, you will not really need knowledge. You can insert a Full Screen Menu module anywhere on your page and attach it to the top of the screen when the user scrolls down. Discover how to set the main menu to scroll here.

In the same spirit as the previous tutorial, you can easily set the main menu of your site at the bottom of the screen. It's very simple: follow this tuto to get a Fixed Bottom Menu.

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Sometimes, simple little bits of CSS code are not enough to achieve what you want... Here are some other avenues to explore:

  • Mhmm - Mighty Header & Menu Maker: this plugin for Divi lets you do extraordinary things. You can choose from about ten different Divi headers. Many options will allow you to change the hamburger icon, create mega menus and more! See an example on the video above || Discover the plugin.
  • Integrate the Divi Builder into the Divi Header: PavéNum offers a tutorial to integrate the use of the Divi Builder into the Divi header through hooks. I invite you to visit this page if you want to know more about it.
  • Quad Menu: this plugin allows you to create a custom mega menu for your Divi projects. Discover the plugin.
  • Add icons in the Divi menu: Michèle de Divi Soup offers you to download a free custom header layout with Font Awesome icons. To download here.
  • Use the default Divi header at the same time as the Slide In header: Michèle de Divi Soup (again!) offers you a tutorial to couple two types of menus at the same time. Discover the tutorial.
customization of the Divi menu
elementum tempus lectus Nullam Phasellus ultricies id, vulputate, elit.

Pin It on Pinterest

Shares
Share This