In the previous post I told you about 5 types of headers and menu that we can use in the Divi theme of Elegant Themes.

This time I will show you 4 types of menu that will allow you to show more content of your website and also hide certain elements to give relevance to images or videos. Or the opposite, if you want that when you click on the display button the options occupy the whole screen, we also have the answer. Let’s go!

6.- Hamburger (sliding)

The smartphones put on trend this type of menu, which is the button that has 3 horizontal lines and if we click (or tap) on it the menu is displayed.

The divi mobile menu became necessary for the mobile versions of the websites, since for space reasons not all menu items can be displayed in the traditional way (otherwise we would have to zoom and that’s bad for the user experience).

In addition, we already feel used to this type of menu and it’s easy for us to understand that by doing tap there we will be able to visualize options.

The main advantage of this type of menu is that it allows the design of the web header to be kept clean and can be used in the PC and mobile versions in the same way.

Another of the wonders of Divi is that it allows us two different designs of the type of hamburger menu: Sliding and Full screen. Let’s see them.

How do we set up the sliding hamburger menu?

This type of menu is displayed from right to left as a sidebar when the button is pressed.

The steps are extremely simple:

1. Go to the usual route: “Dashboard”, then “Divi” and go to the “Theme Customizer”.
2. Click on “Header and navigation”.
3. Then in “Header format” we will select “Slide”.
4. Save the changes!

How to customize the sliding hamburger menu?

With the following steps you can modify the text size, space between the letters and other details. Let’s see how to get there:

1. Access the Dashboard, then “Divi” and enter the “Theme Customizer”.
2. In “Header and navigation”, click “Slide” and then “Full screen title settings”.

This last option is created when you select the sliding hamburger menu.

7.- Full screen menu

With Divi we can configure the menu so that when selecting it it does not occupy only a part of the screen but a full screen.

How to set the hamburger menu in full screen?

We return to the route we have already been using to configure the menu types with Divi: “Dashboard”, then “Divi” and go to the “Theme Customizer”.

The next thing we will do is:

1. Click on “Header and navigation”.
2. Select “Header format”.
3. Click on “Full screen”.
4. Again, save the changes!

How to customize the hamburger menu in full screen?

Again, we’ll go to Divi’s “Theme Customizer”.
There we will select Navigation Header.
Click “Slide” and then “Full screen title adjustment”.

8.- Menu that is activated with the scroll

Another wonder of Divi is that it allows you to hide the menu and only show it while the user scrolls. We love this because if we want to give relevance to a large image on the cover of the web, it gives us the space on the screen for that.

How to configure this type of menu?

Go to the “Theme Personalizer” of Divi.
Click on “Header and navigation”, then on “Header format”
Check the checkbox that says “Hide navigation until there is a displacement”.

9.- Vertical menu

This type of menu is no longer very fashionable but it is not in disuse, so as each element of the web design responds to an objective and function, let’s see how to activate it.

1. Go to the “Theme Customizer” of Divi.
2. Select “Header and navigation”.
3. Click on “Header format”
4. Enable vertical navigation in the checkbox that you will see.
5. Save the changes!

When performing this procedure you will see another new check box that says “Orientation of the vertical menu”. This will allow you to define if the menu will appear on the right or left side of the website.

The good thing about web design is that the possibilities are almost endless if there is creativity, and with Elegant Themes’ Divi, the customization is so varied that we can always do new things or refresh those we have created before.

Which of all the menus is your favorite? Do you have more suggestions? Tell us!