We create a number of custom menu hover effects for many of our clients and child themes so I decided it is time to get some of those tutorials into your hands.

This first one is inspired by our very own Jerry Simmons. On a recent project he came up with this nifty Divi Menu Double Outline Reveal when you hover over the menu items.

In this tutorial I am going to show you how you can make the outline slowly reveal itself from two corners of each menu item.

View The Live Demo

*Note: This customization will not work correctly if you have drop down sub-menus.

Let’s Get Started Making The Double Outline Reveal

 

Adding The Custom CSS

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>Custom CSS (which is located at the bottom of the first tab in Theme Options)

Add this CSS.

/*------------------------------------------------*/
/*----------[GQ - MENU OUTLINE REVEAL]------------*/
/*------------------------------------------------*/

	@media only screen and (min-width : 981px) {
	#main-header li a {
	    	margin-right: 10px;
    		padding-bottom: 0px!important;
    		margin-bottom: 33px;}
	#main-header li a::before, #main-header li a::after {
		content: '';
		position: absolute;
		width: calc(100% + 20px);
		height: calc(100% + 20px);
		z-index: -1;
		border: 2px solid transparent;
		-webkit-transform: scale(0);
		-webkit-transform-origin: 0 100%;
		transition: 0.45s; }
	#main-header li a::before {
		margin-left: -12px;
		margin-top: -12px; }
	#main-header li a::after {
		right: -12px;
		margin-top: -12px; }
	#main-header li a::before {
		border-bottom: 2px solid #079f66;
		border-left: 2px solid #079f66;
		-webkit-transform-origin: 0 100%; }
	#main-header li a::after {
		border-top: 2px solid #079f66;
		border-right: 2px solid #079f66;
		-webkit-transform-origin: 100% 0%; }
	#main-header li a:hover::before, #main-header li a:hover::after {
		-webkit-transform: scale(1); }}

 

 

Making Adjustments

Now because there are already so many menu padding options available in the Theme Customizer, there is a good chance you may have to adjust the bottom and right padding and margins of the main buttons. You can change that here.

divi menu reveal

 

The following rules change the padding of the outline so that you can make it bigger or smaller

divi menu reveal

 

The following rules change the border thickness and color for the outlines.

divi menu outline reveal

 

And that’s it.

If you used this on one of your projects, please share a link below so we can see how you used it.

Have fun!


Well, that’s all for now. I hope you find this article useful.


STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest