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 *

    • Hi Rogerio,

      To make each item a different color, you could give each item a different class so you can target them separately, or you could use nth-child. I’ll explain with nth-child in this case (since you’re trying to change the whole thing. (also, not on hover)

      Add these guys in addition to the CSS in the post

      .et_header_style_left #et-top-navigation nav>ul>li>a:nth-child(1),
      .et_header_style_split #et-top-navigation nav>ul>li>a:nth-child(1) {
      background: #d00;
      }
      .et_header_style_left #et-top-navigation nav>ul>li>a:nth-child(2),
      .et_header_style_split #et-top-navigation nav>ul>li>a:nth-child(2) {
      background: #b00;
      }
      .et_header_style_left #et-top-navigation nav>ul>li>a:nth-child(3),
      .et_header_style_split #et-top-navigation nav>ul>li>a:nth-child(3) {
      background: #900;
      }
      .et_header_style_left #et-top-navigation nav>ul>li>a:nth-child(4),
      .et_header_style_split #et-top-navigation nav>ul>li>a:nth-child(4) {
      background: #700;
      }

      and keep going until you’ve covered all the menu items. (the above example will cover 4 items)

      Hope that helps.

  1. 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

    • Hi, could you share a URL or email me the URL so I can have a look? Thanks

      • sorry i am working on a local machine
        reason for the fixed menu problem in my opinion is divi’s menu itself i will post my code here when i have fixed it

        • There are many many many things that could cause the problem. Send me a link once you have it online, and I can have a look.

  2. 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

    • Hey Helen, thanks! I’ve updated the CSS so it’ll account for the menu items with children. Thanks for pointing that out!

      • Great! Thnx for your quick response!!!

New tutorials

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.

Happy Pride Month!

Happy Pride Month!

Pretty simple really.

Happy pride month to everyone who celebrates it!

I've been seeing a lot of nasty comments on social media recently, so I wanted to add some extra pixels that lean towards love, empathy, and inclusivity to help balance it out.

Thanks,
PK