Fixing the Divi Header Menu Magnifying Glass Issue

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 icon 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.

Here is the result of implementing the fix:

divi theme magnifying glass issue - fixed

Fixing the Search Icon Issue using Divi Booster

 

Divi Booster contains an option to fix this issue. You can enable it at:

Divi > Divi Booster > Header > Main Header > Fix header menu width / magnifying glass issue

Simply enable the option, save, and the icon should be restored to its correct position.

Fixing the Search Icon Issue using CSS

The following CSS can be used to restore the search icon to its original position in the header:

@media only screen and (min-width: 981px) {
    .et_header_style_left #et_top_search {
        position: absolute !important;
        right: 0px;
    }
    .et_header_style_left #et-top-navigation {
        padding-right: 40px !important;
    }
    .et_header_style_centered #et_top_search {
        position: absolute !important;
        right: -20px;
        top: 10px;
    }
    .et_header_style_centered #et-top-navigation {
        padding-right: 0px !important;
    }
}

Fixing the Search Icon Issue using CSS / JS (Old Method)

I used to recommend the following fix, though it's a bit more complex than the above and no longer works in recent versions of Divi. I've left it here in case you find yourself using an old version of Divi and unable to get the other options to work.

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.


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

CSS

/* 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}

JavaScript / jQuery

jQuery(function($){
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");
});

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

22 Comments

  1. Hello! How am I going to apply this fix to my customized global header menu layout? I've tried so many methods but it's not working. Can you please help me with this? Thank you.

    Reply
  2. Lifesaver !!! I've been trying to solve this for over 2 hours and thanks to your CSS code (I don't have the Divi Booster option) it is now resolved ! Thank you

    Reply
    • Great! I’m glad it helped, Fay :)

      Reply
  3. Hi Dan, I'm using your Divi Booster plugin, and checking the box that addresses this issue, however, the search icon will not, for love or money, do the right thing.

    Can you let me know if this solution is still relevant to the current Divi, or if there may be something else at play here?

    https://www.pilatesprocess.ca

    Thanks!
    : Steve

    Reply
    • Hey Steve, I've just released an update to Divi Booster (3.0.3) that improves and updates the feature for the latest version of Divi. Hopefully it'll work for you now, but please let me know if not. Thanks!

      Reply
  4. Hi
    My client site customized by Divi, when we migrated the site from one hosting to another search form not working, would you like to help me. thanks

    Reply
    • Hi Faruk, I'll be happy to try and help if I can. Are you able to send me a link to the search form either here or via my contact form, so that I can take a look? Thanks!

      Reply
  5. Hi
    I am using Divi for my client site, suddenly I saw that search Icon of main menu not working, so I am searching and finding your site. thanks

    Reply
    • You're welcome, ThemeMasterly!

      Reply
    • Hey Peter, I just checked on Safari / iPhone and also on desktop with a narrow browser window and the search results display for me in each case (and I can search while in the mobile view). Did you manage to get it working? If not, which phone / browser are you using? Thanks!

      Reply
  6. Hello! The search icon does not align with the menu.. it's a bit above it. :( Thank you

    Reply
    • Hey ingrid, any chance you can send me a link to the site you're working on so that I can take a look / make sure I give you the right advice? Cheers!

      Reply
  7. I have another problem even before the icon wraps to a second line. The search icon does not align vertically with the menu.

    It looks like it has some top padding or margin that I need to get rid of. The top of the magnifying glass aligns with the center of the menu text and is not centered in the header. However, the search box (when opened) is positioned properly.

    Any tips?

    Thanks.

    Reply
    • Hi susanne, it looks like you're removed the search icon from the site linked in your username, right? If you're still trying to change the search icon vertical position, one way would be to use the following CSS:

      #et_search_icon:before { top: -10px !important; }
      

      A larger negative number will move it up further, and a positive number will move it down. (I think the default is -3px, so anything above or below that will move it up or down respectiely)

      Reply
      • Ah! Thanks! That works beautifully!

        (Yes, I disabled the search icon, since it was *uugly*)

        Reply
  8. Dan,

    I tried this out and it works. One question, when I use it with a child theme it doesn't appear to work. Any idea what could be causing that?

    Thanks.

    Reply
    • Hi Robert, I don't know off hand, I'm afraid. Are you able to share a link to the site running the child theme?

      Reply
  9. Hi, Thanks for the tip.

    Where can I put the javascript script in Divi?

    Thank you.

    Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.