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.

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

Related Posts

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.

Pin It on Pinterest