How to fix the Divi search tool in the header problem

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.

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.

How useful was this post?

Click on a smiley to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

About The Author

Leave a Comment

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

Scroll to Top