This is the third in a new series I am starting 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 Divi Menu buttons with a background that closes in horizontally when you hover over it.
Let’s Get Started Making The Divi Menu Buttons that Close In Horizontally
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 - CLOSE IN]-----------------*/
/*------------------------------------------------*/
#top-menu li {
padding-right: 5px;}
#top-menu > li > a {
padding: 15px 15px!important;
margin-bottom: 15px;}
#top-menu .menu-item-has-children > a:first-child:after {
display:none;}
#top-menu-nav > ul > li > a {
background: #ececec;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;}
#top-menu-nav > ul > li > a:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #3173b5;
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;}
#top-menu-nav > ul > li > a:hover,
#top-menu-nav > ul > li > a:focus,
#top-menu-nav > ul > li > a:active {
color: #ffffff;}
#top-menu-nav > ul > li > a:hover:before,
#top-menu-nav > ul > li > a:focus:before,
#top-menu-nav > ul > li > a:active:before {
-webkit-transform: scaleX(0);
transform: scaleX(0);}
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 padding of the main buttons. You can change that here.
The following rules change the background colors before and after hover and the font color on hover.
The following rules change the timing of the animation.
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.
Hi Geno,
What would cause this to not work in a child theme, and only work when pasted into the divi theme options box?
This is an issue i am finding with css, sometimes it only works when installed in the theme options which is annoying.
Should this work when pasted into a general child theme css box?
Hi Nicholas, Are you pasting the code into the child themes style.css file? If so, and it still is not working it is most likely a caching issue. You should clear all cache including browser, plugin and server side caching tools.
hi, tried to use some of the codes. all working nice so far. but the hover color isn´t the same when finished than the definied. it seems there´s some transparency or something in there. when i set color to black and hover its getting dark gray. any ideas?
BY default Divi adds transparency when you hover. Add this to override it.
#top-menu-nav > ul > li > a:hover { opacity: 1;}