Divi Tip – Header Menu Item Blocks

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

Leave a Reply

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

  1. Hi, great tip. Looks great. except the arrow of the submenu is now above the menu items. Is there a way to resolve that?

    thnx

  2. hi i love this, however there are some issues
    a: the menu jumps
    b: when you have a fixed menu it does not really work

New tutorials

Use a featured video in post templates with Breakdance
ACF repeater fields as accordions in Breakdance
Breakdance 2 vs. Divi 4
Breakdance 2 for Agencies

Why no ads?

Hi, I'm PK, and I maintain and publish content on this site for two reasons.

  1. To give back to the community. I learned so much from people's tutorials and StackOverflow that I wanted to contribute and help others.

  2. To provide a more structured learning experience. People struggle to find the course that guides them from start to finish, based off of real life experience, and my courses provide that.

The only "ads" I have here are for my own courses, and maybe an affiliate link, but that's it. They fund the website resources and provide more motivation for me to produce better content.

Any bit of interest helps. Even sharing with your friends, suggesting my courses to your developer or designer, or subscribing to my YT channel, or joining our Discord. Thanks and I'll see you around!

There's a newsletter!

Sign up to the newsletter for the occasional updates on courses, products, tutorials, and sales.