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;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	-webkit-appearance: none;
}

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.

You may also like…

Author: Aidan Ashby

Aidan is a web and branding designer living in Bristol, 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.

11 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
  2. Frida

    Thank you! I’m so happy to have found your solution. However, I’m still having problems with it in Mobile mode. The search frame is too small. Perhaps you have a solution for that? 🙂

    Reply
    • Aidan

      Is the available space for your search bar being restricted by the size of the logo in the header module? Setting a high max-width for the search bar should make it fill all the remaining available space after logos etc on mobiles. Feel free to send me an email if you need to describe your problem further.

      Reply
  3. Madeleine

    Hi, thank you for this, was looking for a solution for the past two days; I am a bit of a novice to css – could you please explain where in the template should I add the code – to module settings / advanced tab? Will be grateful for your help 🙂

    Reply
    • Aidan

      In order for the CSS to apply to the whole site it’s best to add it in the admin area under Divi > Theme Options, at the bottom of the page in the Custom CSS box. Alternatively, if you’re using a child theme you could add it in the child theme’s style.css file or under Appearance > Customise > Additional CSS.

      Reply
  4. luigi

    nel menu dovrei cambiare il colore del testo che si digita nella ricerca in quanto a me è impostata sul nero e non è visibile sul menu. ho solo trovato impostazione del colore dell’icone ricerca ma non del colore del testo. grazie anticipatamente a tutti

    Reply
  5. Steve

    Your solution works perfect. Thank you so much for sharing – I was on the verge of pulling my hair out until I found this!

    Reply
  6. Molly

    Hi! Thanks for sharing this! Any chance you know how to remove or add custom styles to that little blue gradient “x” that appears in the search bar when you start typing? Thanks!

    Reply
    • Aidan

      Yeah I’d noticed that recently too. This is a new Webkit feature so is generated by the browser rather than by Divi. I’ve added some extra style to the CSS code in my article above to fix this for you.

      Reply
      • Molly

        Amazing! Thank you so, so much. Saved me a ton of time trying to figure that one out 🙂

        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.