Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Last week I was asked to create a new Slide In menu effect similar to the existing feature built into Divi. But in this case, the client wanted the menu to remain horizontal and not push the whole page over to the left.

In this tutorial, I will show you how to use a little custom CSS to add a Slide In Horizontal Menu when hovering anywhere over the Main Header area. I even added a little change of color when the fixed header is enabled on scroll.

View The Live Demo

 

 

Let’s Get Started Setting Up The Customizer Settings.

1. Start by changing the Header Style to Fullscreen in the Customizer.

 

3. Publish Settings and Exit.

Adding The Custom CSS

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. Otherwise 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 DIVI SLIDE IN HORIZONTAL MENU ]------*/
/*------------------------------------------------*/

	/************** new hidden menu customization ***************/

		/* remove right margin */
			@media (min-width: 981px) {
				.et_fullwidth_nav #main-header .container {
						padding-right: 0px;}}

		/* the slide in menu */
			@media only screen and (min-width : 981px) {
			#et-top-navigation {
				background: #b345c5; /*menu and button background color*/
				margin-right: -312px; /*adjust this based on the width of your menu*/
				padding: 30px 33px 0px 90px!important;
				transition: all 0.5s ease-out;}

			.et-fixed-header #et-top-navigation {
				background: #003d57!important; /*menu and button background color on fixed header*/ }
			.et-fixed-header #et-top-navigation nav>ul>li>a {
				padding-bottom: 33px!important;}

			#et-top-navigation:before {
				color: #fff; 
				font-size: 40px;
				font-family: ETmodules!important;
				font-weight: 400;
				content: "\61";
				cursor: pointer;				
				margin-left: -86px;
				margin-top: -23px;
				position: absolute;
				padding-left: 20px;
				padding-right: 20px;
				padding-top: 20px;
				padding-bottom: 20px;}}


		/* the slide in menu animation */
			@media only screen and (min-width : 981px) {
				#main-header:hover #et-top-navigation {
					margin-right: 0px;
					padding: 30px 33px 0px 35px!important;
					transition: all 0.5s ease-out;}

				#main-header:hover #et-top-navigation:before {
					opacity:0;
					transition: all 0.5s ease-out;}}

		/* menu links */
			@media only screen and (min-width : 981px) {
				#top-menu a, #et-top-navigation a {
					color: #fff!important;}
				#top-menu li.current-menu-item>a, #et-top-navigation li.current-menu-item>a {
					color: #fff!important;}}

 

Making Adjustments To The CSS

As with all my tutorials, my goal is not to teach you how to use Divi Settings as much as it is to teach you how to customize your website learning a little CSS along the way. So with that being said, here are a few CSS tips to help you learn a little more about CSS.

*Note: All of these customizations are wrapped in media queries to prevent any changes to the mobile menu.

This snippet controls the menu background color and negative right margin which is hiding the menu to the right. You will have to modify the right margin based on the width of your menu. The more menu items you have, the more you will have to increase the negative margin.

 

This snippet changes the menu background color on the Fixed Header as you scroll down the page.

These snippets control the icon color, size, weight, and position. You can experiment with these settings if you like but most likely will not need to unless you made a lot of changes to the menu height in the customizer settings.

 

This snippet removes the negative right margin on hover.

 

And finally, this last piece hides the icon on hover.

 

 

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.

©2012-2018 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest