I like Divi’s default header with the Logo on the left and the primary menu bar vertically centered on the right. However, in some cases, I move the menu to the bottom of the header. (A lot of times, I will insert a Call Now or Request Quote button above.)

The CSS code to make this happen, is rather simple:

/* Move navigation menu to the bottom of header */
.et_header_style_left #et-top-navigation nav > ul > li > a, .et_header_style_split #et-top-navigation nav > ul > li > a {
	padding-bottom: 25px !important;
#top-menu-nav {
	padding-top: 25px;
#et_top_search {
	margin-top: 25px;
#top-menu li li a {
    padding: 6px 10px;

That’s all it takes.

If you have questions or experience problems, leave me a message in the comments below.

Join our email list

Join our email list

Join our mailing list to receive the latest tech tips from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This