If you change the height of the logo in the Divi Theme you may find that the links to the right of the header bar are no longer nicely vertically centered in the header bar.
This happens because Divi uses a fixed amount of padding to move the links into the correct position vertically. But this only works if the logo is set to the default size. A larger logo will make the header bar taller, but the padding around the links won't change.
We can fix this by using the following CSS to vertically center the links and search icon in the header area:
@media only screen and ( min-width: 981px ) {
/* Vertically center the top navigation */
.et_header_style_left #et-top-navigation {
display:table-cell;
vertical-align: middle;
float:none !important;
}
.et_header_style_left #main-header .container {
display: table
}
/* Right align the contents of the top navigation area */
.et_header_style_left #et-top-navigation { text-align:right; }
.et_header_style_left #et-top-navigation > * { text-align:left; }
.et_header_style_left #top-menu-nav,
.et_header_style_left #et_top_search {
float:none !important;
display:inline-block !important
}
.et_header_style_left #et_top_search {
vertical-align: top !important;
margin-top:3px
}
}
Works fine for me, thank you
When I use this option, the woocommerce cart icon ends up between the menu and the logo, with proper vertical alignment but using the default color (black).
The search icon is unaffected.
Hey Brett, I'll take a look at this as soon as I can. When I originally wrote the code I didn't have woocommerce installed. I guess some adjustments are needed to get it working correctly when it is!
It works great on the desktop version.
But when it is on the mobile version, the drop down menu is getting too narrow to navigate, any way to fix this and keep the vertical alignment??
Cheers,
Hi Dee, I've completely rewritten the CSS code for this so that it works correctly in more cases. As part of this, I've set it not to affect the mobile header at all. If you are happy with the old version of the code, you may like to just surround it in the following media query to stop it affecting mobiles:
@media only screen and ( min-width: 981px ) { // Old code goes here... }