This is the sixth in a series on turning your Divi Menu links into buttons and giving them some cool hover effects.

In this tutorial I am going to show you how you can make a Divi Menu Bar With Zoom-In Buttons when you mouse over them. As with my other Divi Menu Button tutorials, I designed them to work with the default header and the centered header.

View The Live Demo

Let’s Get Started Making The Divi Menu Bar With Zoom-In Buttons

 

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 BAR]-------------------*/
/*------------------------------------------------*/

	@media only screen and (min-width : 981px) {
		
		.et_fullwidth_nav #main-header .container {
			padding-right: 0px!important;
			padding-left: 0px!important;}
		
		#et-top-navigation {
			background: #3173b5;}

		.et_header_style_left #et-top-navigation,
		.et_header_style_split #et-top-navigation {
			padding-top: 0px!important;
			padding-left: 13px!important;}
			
		#top-menu li {
			padding-right: 15px;}

		#top-menu > li > a {
			padding: 15px 15px!important;
			margin-bottom: 0px;
			margin-top: 0px;}

		#top-menu .menu-item-has-children > a:first-child:after {
			display:none;}

		#top-menu-nav > ul > li > a {
			color: #ffffff;
			-webkit-transform: perspective(1px) translateZ(0);
			transform: perspective(1px) translateZ(0);
			box-shadow: 0 0 1px transparent;
			-webkit-transition-duration: 0.1s;
			transition-duration: 0.1s;
			-webkit-transition-property: box-shadow, transform;
			transition-property: box-shadow, transform;}
			
		#top-menu-nav > ul > li > a:hover, 
		#top-menu-nav > ul > li > a:focus, 
		#top-menu-nav > ul > li > a:active {
			background:#214c79;
			color:#ffffff;
			opacity:1;
			z-index: 99999;
			box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 1.0);
			-webkit-transform: translateZ(0) scale(1.1);
			transform: translateZ(0) scale(1.1);}}

 

 

Making Adjustments

I wrapped this in a media query so that it only applies the CSS on typical desktop screen sizes.

menu bar 1

 

By default the header container has 30px padding on the left and right. I removed that padding but if you want to add it back, just remove this.

menu bar 2

 

I am applying the background color to the navigation bar only and not the whole header. You can change that background color here.

menu bar 3

 

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 padding. You can change that here.

menu bar 4

 

The following rules change the background colors before and after hover and the font color on hover. In my case the font color is white before and after for hover. But I left it there in case you want to change the font color on hover, you won’t have to add it. For example maybe you want the background to be a very light color and the font color to match the bar background color.

menu bar 5

 

The following rules change the timing and the zoom of the animation.

menu bar 6

 

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.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

Latest posts by Geno Quiroz (see all)

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest