How to create a menu in WordPress, how customize the header of a site made with the theme Divi, where to find customization options etc... All questions that will find answers in this article. I offer you a full file on Divi headers and menus. Here is the program:
- Create the main menu of your WordPress site
- Remove the logo from Divi and add yours
- Select the type of header proposed by Divi
- Set the appearance of menu items
- Some tips to customize your main Divi menu
- Tip #1: Remove the grey line under the menu
- Tip #2: add a background image to the main menu
- Tip #3: add an effect to the menu item overview
- Tip #4: add an image to the mega menu
- Tip #5: Delete the main menu completely
- Tip #6: Set the menu at the top of the screen only to the scroll
- Tip #7: Set the main menu at the bottom of the screen
- Resources to change the Divi menu
1 – Create the main menu of your WordPress site
Before power customize header and Divi menuyou must be in possession of the elements to make appear in the Main navigation Your site. These elements may be:
- pages,
- Articles,
- links,
- of categories,
- labels.
Step 1: Create menu items
The first step is to create pages (welcome, services, contact, about etc...) and possibly blog categories. These elements will have to have "published" status to be used within your main menu. You will therefore not be able to add pages with the draft status.
Step 2: Create your main menu
Go to the tab Appearance > Menu. Simply enter the name of your menu in the dedicated field and click "Create menu".
Once you create your menu, you will be able to check the items to add to your menu. The list of available items is on the left of the screen. These elements are classified by typology (pages, articles, custom links, categories).
Simply check the desired items (those you have published/created upstream) and click on Add to menu.
Step 3: Organize the main menu structure
You can drag and drop each item in the menu to reorder them. The highest element will be the leftmost element of your main menu – the lowest element will be the rightmost element.
If you move one of your elements to the right, it will then become a sub-element.
Step 4: assign a location to your menu
Remember to assign a location to your menu. Otherwise, your menu will not be visible on the front side (visitor side). Check the box "Main Menu".
Finish with Save Menu then go to front-office side to check how your menu appears.
To understand better, watch this video summary:
Note: creating a main menu of a site does not depend on a theme, it is a native WordPress feature. On the other hand, the appearance of the main navigation depends very much on the theme you use. And that's what we'll see in the rest of this article.
Do you know you can test Divi for free? See you on this page and click on "TRY IT FOR FREE"
2 – Remove the logo from Divi and add yours
Now that your main menu is created, you will be able to customize it.
Then go to the tab Divi > Theme Options > Logo. Click Put online and choose your image from the library or download it from your computer.
This step is simplistic...
3 – Select the type of header proposed by Divi
Now you have all the cards in hand to start setting the type of header you prefer.
Go to the tab Appearance > Customize > Header & Navigation > Header Format.
In the drop-down menu, Divi offers 5 types of headers:
- Default
- Centered
- Inline logo centered
- Slide In
- Full Screen
Your choice will result from different configuration options that we will see in detail.
3.1 – Default header
Here is what the main menu of a WordPress site looks like using the default header of Divi. The logo is located on the left and the elements that make up your navigation follow with a right alignment.
This default header offers several options:
Option 1: "Hide the navigation bar if no scrolling"
If you check this option, the main menu will only appear when the user descends (scroll) to the bottom of the page.
When the Internet user is at the top of the page, navigation disappears.
This option may lead to confusion: if it is not comfortable with the internet, it will not necessarily have the idea of scrolling your page to make navigation appear and could leave your site before even having visited another page. This could have consequences for your rebound rate.
For my part, I never check this option, unless constraints due to design are imposed on me.
Option 2: "Enable vertical navigation"
The default header also allows to get a fixed and lateral navigation. This option allows you to place the side navigation to the right or left. The rendering is pretty and the logo will be placed at the top of the navigation.
3.2 – Header Centered
The centered header displays the logo at the center of your page. The menu items will be centered just under the logo. This design type is ideal if you use a band 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" means: 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 »
3.3 – Header Logo Inline Centré
Header Inline Logo Centered, as you can see on the above screenshot, place 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 in even number and if they have a number of characters more or less similar. Indeed, depending on the elements of your menu, the logo might not be centered and would then offer an inconsistency in the harmony of design.
3.4 – Slide In Header
Header Slide In, as its name indicates, offers a menu that slides from the right when the user clicks on the menu icon (the burger). Besides, if you don't like this burger, you can use a free plugin to change its appearance.
By default the background of this menu is blue, but don't worry, you can customize this menu in the tab Appearance > Customize > Header & Navigation > Slide In & Settings Full Screen Header.
In the Slide In menu options you can:
- Make the search bar appear or not
- Set menu width
- Define the size of the various fonts
- Choose the menu font
- Select the background color as well as the menu links.
3.5 - Full Screen Header
Full screen header of Divi is a cover header. When the user clicks on the menu icon, the screen is fully covered and makes the menu items appear.
The customization options are the same as 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 tutos!
4 - Set the appearance of items in the Divi menu
Now that you have chosen the header type, you will be able to define the appearance of the items in your menu.
Most of the options that Divi offers are in the tab Appearance > Customize > Header & Navigation > Primary Menu Bar. From this tab you can:
- set the menu in full width mode
- Hide logo image from menu
- set menu height
- set logo height
- choose typo size and letter spacing
- define the font of character and its appearance (gras, italics, capitals, etc.)
- set the color of your menu items (text color, active link, sub-element color)
- choose a background color for the main menu as well as for 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 will find some of these options in the tab Appearance > Customize > Header & Navigation > Slide In & Settings Header Full screen.
Need more resources on Divi? Visit ElegantThemes blog full of ideas and tutos! Or learn how to effectively use this theme through my training Divi !
5 - Some tips to customize your main Divi menu
Although Divi makes it easy to define the design of your site using its options, you may want to go beyond it. Here are some tips that may interest you:
Tip #1: Remove the grey line under the menu
You noticed him, didn't you? This thin grey line that delimits the Divi menu... Do you want to get rid of it? It's simple, go to the tab Appearance > 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;
}Tip #2: add a background image to the main menu
Still in the tab Appearance > Customize > Additional CSS You can add this code. Note that you can adapt 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;
}Tip #3: add an effect to the menu item overview
With this simple bit of CSS code, you will be able to display a line that appears on the overview of each item 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 over the mouse, may be easily modified with CSS... For more possibilities, here is a tutorial that offers 3 original ways to animate items in your Divi menu over the mouse.
Tip #4: add an image to the mega menu
See you here to add more images in Divi's mega menu or consult the official documentation regarding the creating a mega menu simple (without images).
Tip #5: Delete the main menu completely
It is very easy to remove the main menu from a page or from a site made with Divi. In two clicks or a bit of CSS, you delete its display on a single page or on the entire site. Discover the tutorial to hide the Divi menu.
Tip #6: Set the menu at the top of the screen only to the scroll
To achieve this, you will not really need knowledge. You can insert a Full Screen Menu module anywhere in your page and attach it to the top of the screen when the user scrolle down. Discover how to set the main menu to the scroll Here.
Tip #7: Set the main menu at the bottom of the screen
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.
6 - Resources to change the Divi menu
Sometimes, simple little bits of CSS code are not enough to achieve what we want... Here are some other avenues to explore:
- Create a transparent menu in a Hero section It's easy!
- Mhmm – Mighty Header & Menu Maker : This plugin for Divi offers you to do extraordinary things. You can choose from a dozen different Divi headers. Many options will allow you to change the hamburger icon, create mega menus and more! See an example on the above video Discover 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 with hooks. I invite you to visit this page if you want to know more.
- Quad Menu: This plugin allows you to create a custom mega menu for your Divi projects. Discover plugin.
- Add icons to the Divi menu next to the text or in place of the text.
- Use Divi's default header at the same time as Slide In header: Michèle de Divi Soup offers you a tutorial to pair two types of menu at the same time. Discover the tutorial.
255 Comments