Divi Menu Swapping Borders

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.

In this tutorial I am going to show you how you can make left and right vertical side borders swap over to top and bottom horizontal borders on each menu item.

This one works best if you do not have too many menu items as the menu has to be a little more spread out than normal menus.

View The Live Demo

*Note: This customization will not work correctly if you have drop down sub-menus. That will require additional modifications not yet available on this tutorial.

Let’s Get Started Making The Divi Menu Swapping Borders

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 - SWAPPING BORDERS]-------------*/
/*------------------------------------------------*/

	#et-top-navigation {
		padding-top: 12px!important;
		padding-bottom: 12px;}

	#top-menu-nav > ul > li > a {
		padding: 0 20px;
		height: 45px;
		line-height: 45px;}

	#top-menu-nav > ul > li > a::before,
	#top-menu-nav > ul > li > a::after {
		position: absolute;
		width: 45px;
		height: 2px;
		background: #3173b5;
		content: '';
		opacity: 0.2;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		transition: all 0.3s;
		pointer-events: none;}

	#top-menu-nav > ul > li > a::before {
		top: 0;
		left: 0;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		transform: rotate(90deg);
		-webkit-transform-origin: 0 0;
		-moz-transform-origin: 0 0;
		transform-origin: 0 0;}

	#top-menu-nav > ul > li > a::after {
		right: 0;
		bottom: 0;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		transform: rotate(90deg);
		-webkit-transform-origin: 100% 0;
		-moz-transform-origin: 100% 0;
		transform-origin: 100% 0;}

	#top-menu-nav > ul > li > a:hover::before,
	#top-menu-nav > ul > li > a:hover::after,
	#top-menu-nav > ul > li > a:focus::before,
	#top-menu-nav > ul > li > a:focus::after {
		opacity: 1;}

	#top-menu-nav > ul > li > a:hover::before,
	#top-menu-nav > ul > li > a:focus::before {
		left: 50%;
		-webkit-transform: rotate(0deg) translateX(-50%);
		-moz-transform: rotate(0deg) translateX(-50%);
		transform: rotate(0deg) translateX(-50%);}

	#top-menu-nav > ul > li > a:hover::after,
	#top-menu-nav > ul > li > a:focus::after {
		right: 50%;
		-webkit-transform: rotate(0deg) translateX(50%);
		-moz-transform: rotate(0deg) translateX(50%);
		transform: rotate(0deg) translateX(50%);}

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 top border and the left border. The yellow highlights are for the left border and the green highlights are for the right. You will notice most of the rules are shared.

The following rules change the thickness and the location of the borders.

The following rules change the timing and the rotation.

And lastly, the following rule changes the border colors and opacity.

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.

Bio
Latest Posts

Geno Quiroz

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.