The Ultimate Divi Bundle - 5 Divi plugins. 1 great price.
Learn More

There is a slight issue with the Divi Theme when you try to put a lot of links in the header bar, which sees the links shift down a row and the search box magnifying glass to get pushed down the page. Here’s how to fix it.

First, a look at the issue. Here is how the header looks if you add a lot of links into the header menu:

divi theme magnifying glass issue

I’ve marked the position of the search icon in orange. ¬†Note also that the links have slipped down a row.

The problem here is that the area assigned to the links is allowed to be as wide as the header itself (1080px in fullscreen mode and 960px when the screen is shrunk). So if there are enough links the area becomes too wide to sit on one line with the other components and is forced to move onto its own line below the logo. And there is no room on this new row for the magnifying glass so it is moved down another row still. Combine that with the fact that the links themselves take up two rows and we see the whole thing is now taking up 4 rows.

We can fix the issue by setting a maximum width on the element containing the links which is about 100px plus the width of the logo shorter than the width of the header itself.

The fix uses a combination of CSS and JavaScript. The CSS hides the menu (until we can resize it) and handles the simple case of using a centered header layout. The JavaScript (jQuery, really) handles the more complicated situation of the default layout, were the logo width must be taken into account.


/* Hide the menu until it is resized */
#et-top-navigation { display:none; }

/* Centered layout */
@media only screen and (min-width:1100px) { 
	.et_header_style_centered #top-menu { max-width:980px; }
@media only screen and (max-width:1099px) { 
	.et_header_style_centered #top-menu { max-width:860px; }
.et_header_style_centered #et-top-navigation{display:block !important}


var logowidth=($("#logo").length)?($("#logo").get(0).width):0;
$("<style>@media only screen and (min-width:1100px) { #top-menu { max-width:"+(980-logowidth)+"px; } } @media only screen and (max-width:1099px) { #top-menu { max-width:"+(860-logowidth)+"px; } } #et-top-navigation { display:table-cell !important }</style>").appendTo("head");

Technical note: I’m using get(0).width instead of .width directly, so that the fix will work even if the header is initially hidden.

Here is the result of implementing the fix:

divi theme magnifying glass issue - fixed