When you have a menu with many elements in the header of your website made with Divi, the search tool is relocated and remains at the bottom right, very weird looking.
Today we are going to see how to correct this problem by placing the search tool at the top of the menu.
Table of Contents
How to reposition the search tool with code
The quickest and cleanest way to fix this problem is to add this CSS code, from your web administration, under Appearance → Customize → Additional CSS:
/* Correct Divi search tool position */
@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;
}
}Code language: CSS (css)You publish the changes and you’re done.
How to reposition the search tool with a plugin
The other possibility is to install the Divi Booster plugin that, in its options, in the main header you have the possibility to correct this problem.
Simply activate the option “Fix header menu width / magnifying glass issue” and save the changes.
No matter which method is chosen, the result is that the problem will be fixed, and the search tool in the Divi theme header will be in its most logical place.
