R10: Five Subtle Menu Hover Effects

by Michelle | Mar 25, 2016 | Recipes | 107 comments

Like our free content? Then you'll love our exclusive Club!

Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!

Find Out More

Recipe #10 is a set of five subtle menu hover effects to make your Divi menus look a little less Divi-ish!

In this recipe I will show you how to apply the effects to both the primary menu and fullwidth menu module.

You can see all 5 effects on the fullwidth menus on the demo page here.

So let’s get cooking!

Ingredients

The Divi Theme or Divi Builder Plugin from Elegant Themes
If you’re going to use the effects on the fullwidth menu module then you will need to have your menu already set up.

Cooking time

This should take you around 10 minutes max.

Preparation

We’ll start with the fullwidth menu module. The first thing we need to do is create our module. So on your page add a fullwidth section and then a fullwidth menu module.

Method

Next, open up your fullwidth menu module, select the menu you want to use from the dropdown list and adjust any settings like the background and text colours.

Now click on the Custom CSS tab and give the module the CSS Class which corresponds with the effect you want to use, I am using ds-my-menu-1 which is the pipes effect you see in the DiviSoup.com primary menu. Don’t forget to Save & Exit.

Now for the CSS, copy and paste the CSS below for the effect you want to achieve into your Child Theme style.css or if you aren’t using a child theme (which you really should be) then paste into the Divi Theme Options epanel custom CSS section.

You will see we are wrapping the CSS in a media query, this is so it doesn’t affect the menu when it switches to the mobile version at 980px.

These are the custom CSS classes for each effect which you need to add in the CSS Class field of the modules’ Custom CSS Tab:

Effect 1: ds-my-menu-1
Effect 2: ds-my-menu-2
Effect 3: ds-my-menu-3
Effect 4: ds-my-menu-4
Effect 5: ds-my-menu-5

Fullwidth Menu Effect 1 CSS - Pipes

/* Menu Effect 1 - Pipes */

@media screen and (min-width: 981px) {
.ds-my-menu-1 a::before,
.ds-my-menu-1 a::after {
	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}

.ds-my-menu-1 a::before {
	margin-right: 10px; /*you may want to adjust this*/
	content: '|'; /*you can change the pipe to something else if you wish*/
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	transform: translateX(20px);
}

.ds-my-menu-1 a::after {
	margin-left: 10px; /*you may want to adjust this*/
	content: '|'; /*you can change the pipe to something else if you wish*/
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	transform: translateX(-20px);
}

.ds-my-menu-1 a:hover::before,
.ds-my-menu-1 a:hover::after,
.ds-my-menu-1 a:focus::before,
.ds-my-menu-1 a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
}
}

Fullwidth Menu Effect 2 CSS - Bottom Border Slide In

/* Menu Effect 2 - bottom border slide in */

@media screen and (min-width: 981px) {
.ds-my-menu-2 a {
	padding: 8px 0; /*you may want to adjust this*/
	margin-bottom: 5px; /*you may want to adjust this*/
}

.ds-my-menu-2 a::after {
	position: absolute;
	top: 60%; /*you may want to adjust this*/
	left: 0;
	width: 100%;
	height: 4px; /*you may want to adjust this*/
	background: #fff;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
}

.ds-my-menu-2 a:hover::after,
.ds-my-menu-2 a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}
}

Fullwidth Menu Effect 3 CSS - Top Border Slide Up

/* Menu Effect 3 - Top border slide up */

@media screen and (min-width: 981px) {
.ds-my-menu-3 a {
	padding: 12px 10px 10px; /*you may want to adjust this*/
	margin-bottom: 10px; /*you may want to adjust this*/
	color: #fff;
}

.ds-my-menu-3 a::before,
.ds-my-menu-3 a::after {
	position: absolute;
	top: 65%; /*you may want to adjust this*/
	left: 0;
	width: 100%;
	height: 3px; /*you may want to adjust this*/
	background: #fff;
	content: '';
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform: scale(0.85);
	-moz-transform: scale(0.85);
	transform: scale(0.85);
}

.ds-my-menu-3 a::after {
	opacity: 0;
	-webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s;
	transition: top 0.3s, opacity 0.3s, transform 0.3s;
}

.ds-my-menu-3 a:hover::before,
.ds-my-menu-3 a:hover::after,
.ds-my-menu-3 a:focus::before,
.ds-my-menu-3 a:focus::after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	transform: scale(1);
}

.ds-my-menu-3 a:hover::after,
.ds-my-menu-3 a:focus::after {
	top: 0%;
	opacity: 1;
}
}

Fullwidth Menu Effect 4 CSS - Circle

/* Menu Effect 4 - Circle */

@media screen and (min-width: 981px) {
.ds-my-menu-4 a {
	margin: 25px 5px; /*you may want to adjust this*/
}

.ds-my-menu-4 a::before,
.ds-my-menu-4 a::after {
	position: absolute;
	top: 15%; /*you may want to adjust this*/
	left: 50%;
	width: 100px; /*you may want to adjust this*/
	height: 100px; /*you may want to adjust this*/
	border: 2px solid rgba(255,255,255,0.6); /*you may want to adjust this*/
	border-radius: 50%;
	content: '';
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
	transform: translateX(-50%) translateY(-50%) scale(0.2);
}

.ds-my-menu-4 a::after {
	width: 80px; /*you may want to adjust this*/
	height: 80px; /*you may want to adjust this*/
	border-width: 6px; /*you may want to adjust this*/
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
	transform: translateX(-50%) translateY(-50%) scale(0.8);
}

.ds-my-menu-4 a:hover::before,
.ds-my-menu-4 a:hover::after,
.ds-my-menu-4 a:focus::before,
.ds-my-menu-4 a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
	-moz-transform: translateX(-50%) translateY(-50%) scale(1);
	transform: translateX(-50%) translateY(-50%) scale(1);
}
}

Fullwidth Menu Effect 5 CSS - Borders Slide In

/* Menu Effect 5 - borders slide in */

@media screen and (min-width: 981px) {
.ds-my-menu-5 a{
	margin-bottom: 5px; /*you may want to adjust this*/
}

.ds-my-menu-5 a {
	color: #fff;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

.ds-my-menu-5 a::before,
.ds-my-menu-5 a::after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px; /*you may want to adjust this*/
	background: #fff;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

.ds-my-menu-5 a::before {
	top: -25%; /*you may want to adjust this*/
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

.ds-my-menu-5 a::after {
	bottom: 40%; /*you may want to adjust this*/
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
}

.ds-my-menu-5 a:hover,
.ds-my-menu-5 a:focus {
	color: #fff;
}

.ds-my-menu-5 a:hover::before,
.ds-my-menu-5 a:focus::before,
.ds-my-menu-5 a:hover::after,
.ds-my-menu-5 a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}
}

Now for the primary menu. There are no modules to create and we don’t need any custom classes as the primary menu has it’s own unique identifier so all we need to do is add the CSS for the effect we want. We also don’t need any media queries as Divi will make that switch for us automatically.

Here’s is the CSS for each effect for the primary menu.

Primary Menu Effect 1 CSS - Pipes

/* Menu Effect 1 - Pipes */

#top-menu a::before,
#top-menu a::after {
	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}

#top-menu a::before {
	margin-right: 10px; /*you may want to adjust this*/
	content: '|'; /*you can change the pipe to something else if you wish*/
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	transform: translateX(20px);
}

#top-menu a::after {
	margin-left: 10px; /*you may want to adjust this*/
	content: '|'; /*you can change the pipe to something else if you wish*/
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	transform: translateX(-20px);
}

#top-menu a:hover::before,
#top-menu a:hover::after,
#top-menu a:focus::before,
#top-menu a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
}

Primary Menu Effect 2 CSS - Bottom Border Slide In

/* Menu Effect 2 - bottom border slide in */

#top-menu a {
	padding: 8px 0; /*you may want to adjust this*/
}

#top-menu a::after {
	position: absolute;
	top: 50%; /*you may want to adjust this*/
	left: 0;
	width: 100%;
	height: 4px; /*you may want to adjust this*/
	background: #fff;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
}

#top-menu a:hover::after,
#top-menu a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

Primary Menu Effect 3 CSS - Top Border Slide Up

/* Menu Effect 3 - Bottom border slides up */

#top-menu a {
	padding: 12px 10px 10px; /*you may want to adjust this*/
	color: #fff;
}

#top-menu a::before,
#top-menu a::after {
	position: absolute;
	top: 60%; /*you may want to adjust this*/
	left: 0;
	width: 100%;
	height: 3px; /*you may want to adjust this*/
	background: #fff;
	content: '';
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform: scale(0.85);
	-moz-transform: scale(0.85);
	transform: scale(0.85);
}

#top-menu a::after {
	opacity: 0;
	-webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s;
	transition: top 0.3s, opacity 0.3s, transform 0.3s;
}

#top-menu a:hover::before,
#top-menu a:hover::after,
#top-menu a:focus::before,
#top-menu a:focus::after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	transform: scale(1);
}

#top-menu a:hover::after,
#top-menu a:focus::after {
	top: 0%; /*you may want to adjust this*/
	opacity: 1;
}

Primary Menu Effect 4 CSS - Circle

/* Menu Effect 4 - Circle */
#top-menu a {
	margin: 5px; /*you may want to adjust this*/
}

#top-menu a::before,
#top-menu a::after {
	position: absolute;
	top: 15%; /*you may want to adjust this*/
	left: 50%;
	width: 80px; /*you may want to adjust this*/
	height: 80px; /*you may want to adjust this*/
	border: 2px solid rgba(255,255,255,0.6); /*you may want to adjust this*/
	border-radius: 50%;
	content: '';
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
	transform: translateX(-50%) translateY(-50%) scale(0.2);
}

#top-menu a::after {
	width: 60px; /*you may want to adjust this*/
	height: 60px; /*you may want to adjust this*/
	border-width: 6px; /*you may want to adjust this*/
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
	transform: translateX(-50%) translateY(-50%) scale(0.8);
}

#top-menu a:hover::before,
#top-menu a:hover::after,
#top-menu a:focus::before,
#top-menu a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
	-moz-transform: translateX(-50%) translateY(-50%) scale(1);
	transform: translateX(-50%) translateY(-50%) scale(1);
}

Primary Menu Effect 5 CSS - Borders Slide In

/* Menu Effect 5 - borders slide in */

#top-menu a {
	color: #fff;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

#top-menu a::before,
#top-menu a::after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px; /*you may want to adjust this*/
	background: #fff;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

#top-menu a::before {
	top: -25%; /*you may want to adjust this*/
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

#top-menu a::after {
	bottom: 40%; /*you may want to adjust this*/
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
}

#top-menu a:hover,
#top-menu a:focus {
	color: #fff;
}

#top-menu a:hover::before,
#top-menu a:focus::before,
#top-menu a:hover::after,
#top-menu a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

I have added some comments to the CSS in the areas that may need adjusting depending on your own menu settings. You may need to play with these to get everything sitting just where you want it. You may also want to change the colours to suit your colour scheme.

And that’s it. Now you have some subtle hover effects to help make your Divi menus a little less Divi-ish ;).

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.