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:
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.
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 🙂
Glad to have helped, Mark.
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? 🙂
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.
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 🙂
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.
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
Your solution works perfect. Thank you so much for sharing – I was on the verge of pulling my hair out until I found this!
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!
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.
Amazing! Thank you so, so much. Saved me a ton of time trying to figure that one out 🙂