Divi Tip – Header Menu Item Blocks

Here’s how you can edit the header menu so the menu hover looks like a block.

The first time I started to write this post.. (or rather, added the CSS to the draft so I could finish writing the post later) was about 4 months ago.

Then, I saw someone ask this question:

(not much reason to hide names, but just in case)

So here we go.

Take this CSS and add it to Theme Options > Custom CSS

.et_header_style_left #et-top-navigation, 
.et_header_style_split #et-top-navigation {
	padding-top: 0px;
} 
#top-menu li {
	padding-right: 0px;
}
.et_header_style_left #et-top-navigation nav>ul>li>a, 
.et_header_style_split #et-top-navigation nav>ul>li>a {
	padding: 33px 12px;
	/* margin: 0px -2px; */
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#et-secondary-nav .menu-item-has-children>a:first-child:after, 
#top-menu .menu-item-has-children>a:first-child:after {
	top: 33px;
}
.et_header_style_left #et-top-navigation nav>ul>li>a:hover, 
.et_header_style_split #et-top-navigation nav>ul>li>a:hover {
	background: #d00;
	color: #fff;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#et_top_search {
	margin-top: 33px;
}

Note: If the slight gap bothers you, take the margin part out of the comments. (the /* */ parts)

Anyways, it should look something like this:

And now Divi looks like this:

[sc name=”learn css”]

 

Update:

Added an extra line in the CSS for the menu items with children.

Photo by moren hsu on Unsplash