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

November 06, 2020

Hello and welcome to the second part of the tutorial on how to transform the Divi header with icons and hover effect. In this tutorial you will learn how to add a line under the header with only CSS, to make it extra clear for users on what page they are right now, this means, this little trick will improve the usability of the website.

If you haven’t seen the first part of the tutorial, I recommend to follow that first, since you will learn how to add classes to the menu items and how to add the icons.

Let’s dive into it!

There is no need to add an extra class to the menu items, since it will work right away. This tutorial is based on 3 Beautiful CSS Hover Effects You Can Add to Your Divi Menus.

The CSS for the line in the Divi header

/* Line under header */
/* Show to line on the current page */
#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
	content: "";
	position: absolute;
	z-index: 2;
	left: 0;
	right: 50%;
}

#top-menu li a:before {
	content: "";
	position: absolute;
	z-index: -2;
	left: 0;
	right: 100%;
	bottom: 50%;
	background: #473bf0;
	/*** COLOR OF THE LINE ***/
	height: 3px;
	/*** THICKNESS OF THE LINE ***/
	-webkit-transition-property: right;
	transition-property: right;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

#top-menu li a:hover {
	opacity: 1 !important;
}

#top-menu li a:hover:before {
	right: 0;
}

#top-menu li li a:before {
	bottom: 10%;
}

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...

Black Friday Sale

A premium eCommerce child theme

50% Off!

Limited time only.

By Melle

i

Learn More

Related Posts

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

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...

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.