How to transform the Divi header with icons and hover effects – Part 1

November 05, 2020

In this tutorial, I will show you how to add icons and a line to the Divi header like we have right now on this website. There are many ways to do this, but many of these tutorials require a plugin, something like FontAwesome or having to upload images.

Since we want our products to be optimized for speed, we will only work with the Elegant Themes Icon font and some CSS.

The first thing you have to do is give a class to the menu item you want to add an icon to. To do this go to Appearance -> Menus.

Once you are in the Menus dashboard page, make sure the checkbox for CSS Classes is activated. You can enable this by clicking Screen options and then check the box for CSS Classes. You will now see CSS Classes under the Navigation label. I have added the CSS Class menu-home.

You have to give a unique class to every menu item you want to add an icon to. Since I have the pages Home, Products, Account and Support in my menu, I added the classes menu-home, menu-products, menu-account and menu-support.

To find the icons you want, go to Divi Dezigns and find your perfect icon.

The CSS for the icons in the Divi header

/* Add Icons to header */
/* Add an icon, with correct settings for all menu items. */

#main-header #et-top-navigation ul li a:after {
  opacity: 0.7;
  font-family: 'ETmodules';
  margin-right: 10px;
  float: left;
  font-size: 14px;
  color: #473bf0;
  transition: .2s;
}

/* Set the opacity of the current page icon to 1. */
.current-menu-item.menu-home a:after,
.current-menu-item.menu-products a::after,
.current-menu-item.menu-account a::after,
.current-menu-item.menu-support a::after {
	opacity: 1;
}

/* Set opacity of icon to 1 on hover of that menu item */
#main-header #et-top-navigation ul li a:hover:after {
  opacity: 1;
}

/* Add the icons */
.menu-home a:after {
    content: "\e074";
}
.menu-products a:after {
    content: "\e033";
}
.menu-account a:after {
    content: "\e08a";
}
.menu-support a:after {
    content: "\e028";
}
/* Do not show icons on drop down menu */
#top-menu li li a:before {display: none;}

And voila, that was all. Your menu now really looks bad ass!

Related Posts

How to change the Divi slider arrows to any icon or text

The Divi slider is a slider that works out of the box, but always looks the same on every website, if no special CSS has been added. With the help of just a few lines of code, it can be transformed to something a lot more beautiful. In our latest child theme...

By Melle

i

Learn More

Related Posts

Free download: 25 Custom Divi buttons without CSS

Free download: 25 Custom Divi buttons without CSS

Divi is an amazing website builder and page builder for WordPress. It offers a ton of custom functionalities and elements that can be used to create beautiful websites. One of the most popular Divi features is the Divi Builder which allows you to create custom buttons...

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

h

Subscribe to Our Newsletter

Stay in the Loop!

Save 10% on your next purchase!

Save 10% on your next purchase!

Grab your discount and get special offers sent to your inbox!

Yes, you will receive your coupon in a few seconds.