Divi Headers and Menu Types (Part 1) 1 week ago

In WordPress, and especially in the Divi theme of Elegant Themes, the possibilities are almost endless. The header, that important element of any website, can be decisive for a user to stay on the website or decide to ignore it.

Fortunately, the Divi header is highly customizable and gives you the possibility to change it, design and make the best user experience. In addition, the versatility to play with the logo layout and menu items are also advantages that you get when you install Divi.

I’ll tell you some of these customization possibilities. To apply them, we must have at least version 2.6 of the Divi template.

1.- Floating, fixed or sticky menu

Divi by Elegant Themes allows us two types of header for a website or blog:

1.1.- Floating, fixed or sticky header design

In this type of Divi header, the menu is static when you scroll down, that is, the menu and the logo will always be visible even if we scroll through the page.

The advantage of this type of Divi header is that the user always has the navigation menu available. The disadvantage is that it occupies space on the screen and therefore decreases the view of the content that the user wants to see on the web. That’s why it is important that the height occupied by this heading is not exaggerated. In fact, Divi allows us to even remove the logo when it is scrolled and thus enlarge the space of vision of the web.

This menu option is active by default when we install Divi.

How can we deactivate it? Easy:

  1. Go to Administration Panel.
  2. Select “Divi” and then “Theme options”.
  3. Go to the “General” tab, then select “Fixed navigation bar” and in the selector we click on “Deactivate”
  4. As always, we scroll down and save changes.

1.2.- Traditional menu (no sticky):

In this type of menu when the user scrolls over any of the pages of the website, the menu disappears from the view of it. To access the menu it will be necessary to scroll again, but this time upwards. Upon reaching the top of the page the user will again see the website’s navigation menu.

2.- Non sticky menu, with large and centered logo

If you want to put a logo of large dimensions in the Divi header of your website, you must first examine the possible dimensions to adapt the image you are going to upload.

How to upload the logo?

Easy peasy:

  1. Go to “Administration Panel”.
  2. Click on “Divi” and then “Theme options”.
  3. In the “General” tab, we look for the Logo section and click “Upload”.
  4. Save the changes!

How to center the logo?

If we want the logo to be centered on the elements, we will repeat the first two steps mentioned above: we’ll go to the Administration Panel, select Divi and then Theme Options.

  1. Go to “Header and navigation”.
  2. We select “Header format”.
  3. We will choose “Header style” and select “Centered”.
  4. Again, save the changes!

How to maximize the dimension of the logo?

  1. Go to “Administration Panel”, then “Divi” and click on “Theme Customizer”.
  2. Click on “Header and navigation”, then on “Main menu bar”.
  3. In the section “Height menu” we select the maximum.
  4. In “Logo max height” we will also select the maximum “.
  5. Save and publish the changes!

To increase the margin between the logo and the menu items, we will have to reduce the size of the logo.

Maximum size for the logo

But surely you will ask yourself: What if I want this style, but I do not want it to occupy too much height? Let’s see two options:

  • NO Sticky Menu: As explained above, with a non-sticky menu, the Divi header logo may disappear when scrolling, improving the web’s viewing space.
  • Sticky menu without logo: We can use this type of menu but configure it so that when the scroll disappears, the logo disappears.

How do we make the logo disappear only?

  1. In the Divi Administration Panel we will select “Theme Customizer”.
  2. Go to “Fixed navigation settings” and check the box “hide image of the logo”.
  3. As always, we click on Save and publish.

3.- Traditional: Menu with logo on the left

This type of header is configured by default in Divi: the logo is on the left and the menu items are shown on the right. This header design can be float or not float (at the beginning we explain how to configure it).

How to select the traditional header design?

If you are not starting from scratch and you want to have this type of header, we will follow these steps:

  1. We will go to the Divi Theme Customizer, entering through the Administration Panel.
  2. Select “Header and navigation”.
  3. Click on “Header format” and then select “Default”.
  4. Click on Save and publish.

If you can’t see the header correctly, you must modify the parameters of the Height menu as we indicated in the previous step.

4.- Logo centered and on top of the menu

Even if you don’t want a logo of large dimensions, if you want it centered and just above the menu items we will have to follow these steps:

  1. Go to “Theme Options”, in the Divi administration panel.
  2. Go to “Header and navigation” and select “Header format”.
  3. In “Header style” choose “Centered” and save the changes.

5.- Logo on the same line as the menu items

If you want the centered logo, in medium dimensions and in line with the menu with elements on the left and right, follow these steps:

  1. We go to the Divi Administration Panel.
  2. We click on the Theme Customizer and go to “Header and navigation”.
  3. Select “Header format” and then “Header style”.
  4. By clicking on the previous option we will see and select “Online centered logo”.

If your chosen menu style is Sticky type, you can make that centered logo disappear by scrolling down.

To do this, follow this steps:

  1. Go to the Divi Theme Customizer and click on “Header and Navigation”.
  2. Select “Fixed navigation settings and we will see several options.
  3. Select “Hide logo image”.
  4. Save the changes.

Keep in touch for the next post with 5 other styles of Divi header and menu that you can use in your websites!

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">