This article was originally published on this site


When creating your global header, chances are high you’re going to include a blog menu item. If you don’t have many blog post categories on your website, going for one blog menu item might be enough. However, if you have a set of different categories and you want to highlight each one of them, you might want to try a different approach, such as visually showcasing each blog category inside a dropdown menu.

In this tutorial, we’ll show you exactly how to do that using Divi’s Theme Builder. We’ll build the dropdown menu using Divi’s built-in elements and options and we’ll combine it with some code that’ll allow us to place the dropdown menu inside the blog menu item. You’ll be able to download the JSON file for free as well!

Let’s get to it.

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

dropdown post categories

Mobile

dropdown post categories

Download The Global Header for FREE

To lay your hands on the free global header, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

How to Upload the JSON File

Unzip the zipped folder you were able to download above. Then, navigate to your WordPress website > Divi > Divi Library and upload the JSON.

dropdown post categories

dropdown post categories

Once your layout is saved in the Divi Library, you can navigate to the Divi Theme Builder and import the saved layout by clicking on ‘Add Global Header’ or ‘Add Custom Header’ and selecting ‘Build Global/Custom Header’. Go to the ‘Your Saved Layouts’ tab in the Divi Library, select the layout you’ve uploaded in the previous step and save all Divi Theme Builder Changes.

dropdown post categories

dropdown post categories

dropdown post categories

dropdown post categories

To have a functioning menu right off the bat, you’ll be required to go through the first part of this tutorial below; adding the CSS classes to menu items on an individual level. You’ll also need to enable one of the CSS classes inside the Code Module as is shown in part 5 of this tutorial.

1. Add CSS Class to Blog Menu Item

Go to Menus in Appearance

In the first part of this tutorial, we’ll add two custom CSS classes to the blog page menu item inside the WordPress menu. To do that, navigate to menus inside your WordPress dashboard.

dropdown post categories

Enable CSS Class Option

At the top of the page, make sure you enable the CSS classes option inside the screen option.

dropdown post categories

Add CSS Classes to Blog Menu Item

Then, find your blog menu item and add two CSS classes to it. Make sure you leave a space between CSS classes.

  • CSS Classes: first-level first-level-1

dropdown post categories

2. Create Custom Header with Divi’s Theme Builder

Go to Divi Theme Builder

Once the menu item CSS classes are in place, it’s time to switch over to Divi. Go to the Divi Theme Builder and select ‘Add Global/Custom Header’.

dropdown post categories

Start Building Global Header

Then, select ‘Build Global Header’ to be redirected to the template editor.

dropdown post categories

Section Settings

Background Color

Inside the template editor, you’ll notice a section. Open that section and apply a white background color.

  • Background Color: #FFFFFF

dropdown post categories

Spacing

Move on to the design tab and remove all default top and bottom padding.

  • Top Padding: 0px
  • Bottom Padding: 0px

dropdown post categories

Add Row #1

Column Structure

Continue by adding a new row using the following column structure:

dropdown post categories

Sizing

Without adding any modules yet, open the row settings and modify the sizing settings accordingly:

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Width: 95%
  • Max Width: 100%

dropdown post categories

Spacing

Remove all default top and bottom padding next.

  • Top Padding: 0px
  • Bottom Padding: 0px

dropdown post categories

Add Menu Module to Row

Select Menu

Then, add a Menu Module and select the menu you’ve modified in the first part of this tutorial.

dropdown post categories

Upload Logo

Upload a logo next.

dropdown post categories

Menu Text Settings

Move on to the design tab and modify the menu text settings as follows:

  • Menu Font: Roboto Mono
  • Menu Font Style: Uppercase
  • Menu Text Color: #000000
  • Menu Text Size: 18px
  • Menu Letter Spacing: -1px

dropdown post categories

Dropdown Menu Settings

Change the dropdown menu line color too.

  • Dropdown Menu Line Color: #FFFFFF

dropdown post categories

Icons Settings

Next, change the hamburger menu icon color in the icons settings.

  • Hamburger Menu Icon Color: #000000

dropdown post categories

CSS Class

And complete the module settings by adding a CSS class.

  • CSS Class: category-menu

dropdown post categories

3. Create Blog Dropdown Design

Add Row #2

Column Structure

Once your row, containing the Menu Module, is in place, it’s time to build the dropdown menu containing visual blog categories. To do that, add a new row with two equally-sized columns. The entire row will be our dropdown menu for the blog menu item.

dropdown post categories

Background Color

Open the row settings and use a white background color.

  • Background Color: #FFFFFF

dropdown post categories

Sizing

Move on to the design tab and change the sizing settings as follows:

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes
  • Width: 80vw (Desktop), 100% (Tablet & Phone)
  • Max Width: 50vw (Desktop), 100% (Tablet & Phone)

dropdown post categories

Spacing

Modify the padding values next.

  • Top Padding: 10px
  • Bottom Padding: 10px
  • Left Padding: 10px
  • Bottom Padding: 10px

dropdown post categories

Box Shadow

We’re using a subtle box shadow too.

  • Box Shadow Blur Strength: 30px
  • Shadow Color: rgba(0,0,0,0.13) (Desktop), rgba(0,0,0,0) (Tablet & Phone)

dropdown post categories

CSS Class

Then, we’ll add two CSS classes to our row. These CSS classes (in combination with some code later on) will help us place the entire row container inside the blog menu item as a dropdown.

  • CSS Class: dropdown-menu dropdown-menu-1

dropdown post categories

Position

Move on to the advanced tab and reposition the row as well.

  • Position: Absolute (Desktop), Relative (Tablet & Phone)
  • Location: Top Right
  • Vertical Offset: 100px (Desktop), 0px (Tablet & Phone)
  • Z Index: 11

dropdown post categories

Both Columns Main Element

Last but not least, complete the row settings by adding one line of CSS code to each column’s main element. This will help us keep the column structure on smaller screen sizes.

width: 50% !important;

dropdown post categories

dropdown post categories

Add Text Module to Column 1

Add Category Name

Time to visually display our blog categories! Add a first Text Module to column 1 and add the category title to the content box.

dropdown post categories

Add Category Link

Add a link to your category next.

dropdown post categories

Gradient Background

Then, apply the following gradient background:

  • Color 1: rgba(0,0,0,0.08)
  • Color 2: #0a0a0a
  • Start Position: 60%
  • End Position: 60%
  • Place Gradient Above Background Image: Yes

dropdown post categories

Background Image

Upload a background image of your choice. If you want the exact same outcome as in this tutorial, upload one of the illustrations you can find in the folder that you were able to download at the beginning of this post.

  • Background Image Size: Actual Size
  • Background Image Repeat: Repeat X (horizontal)

dropdown post categories

Text Settings

Move on to the module’s design tab and change the text settings accordingly:

  • Text Font: Roboto Mono
  • Text Font Weight: Bold
  • Text Color: #ffffff
  • Text Size: 1.9vw (Desktop), 3vw (Tablet), 3.5vw (Phone)
  • Text Letter Spacing: -0.1vw
  • Text Line Height: 1em

dropdown post categories

Sizing

Change the sizing settings next.

  • Width: 99%
  • Module Alignment: Left

dropdown post categories

Spacing

Modify the spacing settings too.

  • Bottom Margin: 10px
  • Right Margin: 1% (Tablet & Phone)
  • Top Padding: 60% (Desktop), 40% (Tablet & Phone)
  • Bottom Padding: 4%
  • Left Padding: 2%

dropdown post categories

Main Element CSS

And complete the module settings by adding one line of CSS code to the module’s main element.

cursor: pointer;

dropdown post categories

Clone Text Module & Place Duplicate in Column 2

Once you’ve completed the first Text Module, clone the module and place the duplicate in column 2.

dropdown post categories

Modify Text Module in Column 2

Change Category Name & Link

Modify the category title and link in the duplicate module.

dropdown post categories

Change Background Image

Change the background image too. You can find the illustration in the download folder.

  • Background Image Repeat: No Repeat

dropdown post categories

Change Sizing

Change the module alignment in the sizing settings next.

  • Module Alignment: Right

dropdown post categories

Clone Both Modules Once

Once you’ve completed both modules (one in each column), you can clone both of them once.

dropdown post categories

Change Category Names & Links

Change the category names and links inside the duplicate modules.

dropdown post categories

Change Background Images

Along with the background images. You can find the new illustrations in the folder you were able to download at the beginning of this post.

  • Background Image Size: Fit
  • Background Image Repeat: No Repeat

dropdown post categories

  • Background Image Size: Fit
  • Background Image Position: Bottom Right

dropdown post categories

4. Add CSS & JQuery Code

Add Code Module Below Menu Module in Row #1

Once you’ve completed the row containing the dropdown menu category names, add a Code Module to the first row in your section, right below the Menu Module.

dropdown post categories

Add CSS Code

Add the following lines of CSS code to the Code Module:

<style>
/* Enable class below once you're done editing the menu */  
  
/*  
.dropdown-menu {
visibility: hidden;
}*/
  
.category-menu .et_pb_menu__menu .dropdown-menu {
visibility: hidden;
opacity: 0;

-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);  
}
  
.category-menu .et_pb_menu__menu li.first-level:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}
  
.category-menu  .et_pb_menu__menu li {
margin-top: 0px !important;
}  

.category-menu .et_pb_menu__menu li>a {
margin-top: 0px !important;
padding: 30px 20px !important;    
}

.category-menu .et_pb_menu__menu li.first-level>a:hover {
background-color: #00C995; 
}  
  
.category-menu .et_mobile_menu .dropdown-menu {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   

.category-menu .et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.category-menu .et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '37';
color: black;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '36';
color: #c9c9c9;
}
  
.category-menu .et_mobile_menu .dropdown-menu {
display: none;
visibility: visible;
}
  
.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}
  
</style>

dropdown post categories

Add JQuery Code

Along with some JQuery coe that’ll help place the row, containing categories, inside your blog menu item. Make sure you place the JQuery code between script tags as you can notice in the print screen below.

jQuery(function($){
$(document).ready(function(){
  

$('.dropdown-menu').each(function(i){
  
i = i + 1;
  
var $dropdown = $('.dropdown-menu-' + i);
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdown.insertAfter($mainMenuItem);
  
});  
  
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu .dropdown-menu');

$firstLevel.off('click').click(function() {

$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 

$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');

var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();

var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  

});      
  
});
});

dropdown post categories

5. Enable CSS Class Once You’re Done Customizing the Blog Dropdown Items

As soon as you’re done customizing all the dropdown items, you’ll have one thing left to do: hiding the entire row containing the dropdown menu items. This, in combination with a load function inside our code, will prevent the dropdown menu from showing up when loading the page. Once you enable this CSS class, you won’t see the second row inside the Visual Builder anymore, but you’ll be able to access it in the wireframe mode and/or temporarily disable the CSS class when making changes to your dropdown menu. To enable the class, remove the ‘/* */’ brackets at the beginning and end of the CSS class.

dropdown post categories

6. Adding More Post Category Dropdowns

Clone Blog Category Row

If you’re looking to add more category dropdowns, you can clone the entire dropdown row you’ve created.

dropdown post categories

Access Duplicate Row in Layers Panel

Since we’re using absolute positioning on desktop, the rows will be placed on top of each other. To access the rows individually, open the layers panel inside your Divi Builder and open the duplicate row’s settings.

dropdown post categories

dropdown post categories

Change Duplicate Row CSS Class

Change the second CSS Class in your duplicate row. Make sure the number you’re using is consecutive.

  • CSS Class: dropdown menu dropdown-menu-2

dropdown post categories

Add CSS Classes to Menu Items in Appearance

Then, navigate back to your WordPress menu inside your dashboard and add the following CSS classes to another menu item and you’re done:

  • CSS Classes: first-level first-level-2

dropdown post categories

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.

Desktop

dropdown post categories

Mobile

dropdown post categories

Final Thoughts

In this post, we’ve shown you how to get creative with your Divi header and the blog menu item. More specifically, we’ve shown you how to visually include blog categories as dropdown menu items that look great across all screen sizes. This approach will help you highlight each different blog category while still keeping a minimal look and feel at first sight. You were able to download the JSON file for free as well! If you have any questions, feel free to leave a comment in the comment section below.

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.