While Divi 4 has come on in leaps and bounds with its theme building capability, the new menu module leaves a little to be desired.

One of the areas that could be improved is allowing configuration of the menu module’s search. But fear not, here’s a CSS snippet that will allow you to set the max width of the menu search fields and the colours of its input and text.

Final result:

Customised Divi search

You’ll need to insert this CSS code into your theme:

/* Main menu search */
.et_pb_menu__close-search-button, .et_pb_menu__search input, .et_pb_menu__search input::placeholder, .et_pb_menu__search .et_pb_menu__search-form .et_pb_menu__search-input {
	color: white !important;
}
.et_pb_menu .et_pb_menu__search-container {
	left: auto;
	max-width: 800px;
	right: 0;
}
.et_pb_menu .et_pb_menu__search-form, .et_pb_fullwidth_menu .et_pb_menu__search-form {
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,.75);
	padding-left: 5px;
}

The old pre-chromium version of Edge did have problems with the text colour, so if you need to maintain compatibility I suggest setting the input background to white and the text to black.

Feel free to ask any questions or offer suggestions by leaving a comment below.

Author: Aidan Ashby

Aidan is a web and branding designer living in Northampton, UK. He’s a cautious optimist and is loathe to discuss himself in the third person. He loves pancakes and has a perpetual desire to just be sat in the woods with his feet up in front of a bonfire.

Connect with Aidan on LinkedIn.

You may also like…

2 Comments

  1. Mark

    Thank you for this – been chasing my tail all day, trying to figure this out (hard to inspect an element when it disappears as soon as you click away!) Lifesaver 🙂

    Reply
    • Aidan

      Glad to have helped, Mark.

      Reply

Submit a Comment

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

Sign up to receive helpful free design tips in your inbox

Sign up to receive helpful free design tips in your inbox

Join our mailing list to receive the latest blog posts and updates from our team.

Includes a free download of our Good Nook font.

Thanks, you've been subscribed.