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.
Thx a lot you made it for me ! Would you know how can i move the navigation menu on the left ? thx
Gus,
Thanks for your comment. If you want the nav menu moved to the left, but still to the right of the logo, this CSS code will accomplish that:
#et-top-navigation {
float: left;
}
However, if you want to move the nav menu to the left of the logo, that would be much more difficult.