How To Make A Vertical Divi Menu Tutorial by Pee Aye Creative

How To Make A Vertical Divi Menu

In this tutorial I will show you how to make a vertical stacked Divi menu using the Menu module, which would be great in footers and sidebars!
Categories: Divi Menu Tutorials

Join the Divi crowd!

Add A Custom CSS Class To The Menu

The first step is to add a custom CSS class to the specific Menu module that you want to target. We do this so that the snippet does not affect all the menu modules on your site, which allows us to choose which ones remain like normal and which ones are affected. Open the Divi Menu module settings and go to the Advanced tab. Got the CSS IDs & Classes toggle. Place the class “pa-vertical-menu” in the CSS Class input field.

Add The CSS Snippet To Your Site

Now for the fun part, adding the CSS snippet. This is easy and all you have to do is copy it below and add it to your site.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*remove default 11px padding on each side of list items*/

.pa-vertical-menu .et-menu > li {
	padding-left: 0px;
	padding-right: 0px;
}


/*make the menu items fullwidth and add space between them*/

.pa-vertical-menu .et_pb_menu__menu nav ul li {
	display: block;
	width: 100%;
	margin: 10px 0;
}


/*style the menu items*/

.pa-vertical-menu .et_pb_menu__menu nav ul li a {
	padding: 20px!important;
	background: #f0f3f6;
	border-radius: 6px;
	border: 2px solid #f0f3f6;
}


/*style the menu items on hover*/

.pa-vertical-menu .et_pb_menu__menu nav ul li a:hover {
	opacity: 1!important;
	color: #ffffff;
	background: #00d263;
	border-color: #00d263;
}


/*style the active menu item*/

.pa-vertical-menu .et_pb_menu__menu nav ul li.current-menu-item a {
	opacity: 1!important;
	color: #ffffff;
	background: #00d263;
	border-color: #00d263;
}


/*style the arrow icon if there are submenus*/

.pa-vertical-menu .et_pb_menu__menu .menu-item-has-children>a:first-child:after {
	content: "5" !important;
	/*change arrow icon for submenu*/
	padding: 20px;
	font-size: 24px;
}


/*style the arrow icon if there are submenus to submenus*/

.pa-vertical-menu .et_pb_menu__menu .menu-item-has-children .menu-item-has-children>a:first-child:after {
	padding: 8px !important;
	right: 0px !important;
}


/*make the submenu align directly to the right of the menu item instead of below*/

.pa-vertical-menu .et_pb_menu__menu nav ul li ul {
	top: 0!important;
}


/*align submenu to the right of menu link*/

.pa-vertical-menu .et_pb_menu__menu nav li ul {
	left: 100%!important;
}


/*add an icon to the left of each menu item link*/

.pa-vertical-menu ul li a:before {
	font-family: 'ETMODULES';
	content: '';
	text-align: center;
	vertical-align: middle;
	margin-right: 8px;
	margin-left: 0px;
	color: #00d263;
	font-size: 1.3em;
	transition: all .75s ease;
}


/*style the menu items icon*/

.pa-vertical-menu ul li a:hover:before {
	margin-left: 7px;
	color: white!important;
	transition: all .75s ease;
}


/*style the active menu item icon*/

.pa-vertical-menu ul li.current-menu-item a:before {
	margin-left: 7px;
	color: #ffffff!important;
}

@media (max-width: 980px) {
	/*open the mobile menu up and use on all devices*/
	.et-db #et-boc .et-l .pa-vertical-menu .et_pb_menu__menu {
		display: flex;
	}
	/*hide the hamburger icon*/
	.et-db #et-boc .et-l .pa-vertical-menu .et_mobile_nav_menu {
		display: none;
	}
}

Code Summary Explanation

You can see each snippet of the code has a comment with a brief explaination of what it does. This should cover it pretty well, but here is a summary of what is happening. Keep in mind almost all of this is optional, and it is intended to be customized. Use this as a base and make it your own!

The first part of the code is removing some default padding on the left and right of the menu items.

Next we are making each menu item a block element set to 100% fullwidth.

Next we are adding some optional styling to the link color, background color, padding, and a border, and then adjusting that styling for when you hover over it.

We are using the same styling for the active menu item as we are using for hover. This also is optional and can be customized however you want.

If you use a submenu, meaning if you have child items under any menu item, then there are a few adjustments that we are making to those. The arrows that indicate a submenu need adjusted, and the position of the submenu is now aligned directly to the right of the parent menu item.

Next we are adding some arrow icons to the left of the menu items. These of course are optional, but they look pretty nice. They are also styled to move over to the right a little and change color on hover.

The last part of the code has a media query, and this code is used to open up the mobile hamburger menu. In other words, this part is just like our other tutorial here. This is optional, but we added this so that the menu would be stacked vertically the same on any device.

7
Last updated Jul 12, 2021 @ 8:26 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

Pin It on Pinterest

0

Your Cart