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:
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:
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;
}
}
Related Post: Adding CSS to the Divi Theme
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");
});
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.
Hey Ian, I've just published a post with a solution that will hopefully help you:
Maintaining the Position of the Search Icon in Divi Theme’s Menu Module
If it doesn't help, let me know, and if possible send through a link to an example page so that I can look into it further for you. Cheers!
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
Great! I’m glad it helped, Fay :)
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
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!
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
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!
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
You're welcome, ThemeMasterly!
Hi, I am having a problem with the search results not displaying on a mobile phone. Can you help? http://www.kellyscaketoppers.com.au
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!
Hello! The search icon does not align with the menu.. it's a bit above it. :( Thank you
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!
Thank you very much!
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.
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:
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)
Ah! Thanks! That works beautifully!
(Yes, I disabled the search icon, since it was *uugly*)
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.
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?
Hi, Thanks for the tip.
Where can I put the javascript script in Divi?
Thank you.
Hi YesPapa, please see this post for details: https://divibooster.com/adding-javascript-and-jquery-to-the-divi-theme/