Fix Logo Not Aligned in Divi Centered Inline Header Format
Ensuring your logo stays perfectly centered in Divi’s centered inline header format can be tricky, especially if your menu links have varying text lengths. This imbalance can make your logo appear off-center.
Here's a simple CSS solution to ensure the logo remains centered by standardizing the width of your menu items. This approach also assumes you have an even number of links in the menu.
Before
After
Align Logo in Divi Centered Inline Header Format using CSS
Add the following CSS to your child theme’s style.css file or to the "Divi > Theme Options > General > Custom CSS" area:
@media only screen and (min-width: 981px) {
.et_header_style_split #top-menu > .menu-item {
min-width: 180px;
padding-right: 11px !important;
padding-left: 11px;
}
.et_header_style_split #top-menu > .centered-inline-logo-wrap {
padding-left: 11px;
padding-right: 11px;
}
}Related Post: Adding CSS to the Divi Theme
Setting a min-width on the .menu-item ensures each link gets the same amount of space. The width should be slightly larger than the longest menu link. Adjust the min-width value as necessary to fit your specific menu items.
Setting equal padding on both sides of each link ensures a consistently spaced appearance, keeping the logo centered. (Normally Divi applies all the padding on the right of the element). With these adjustments, your logo should remain perfectly centered, providing a clean and balanced appearance for your website header.
0 Comments