Looking to customize the Divi navigation search feature? You can easily do it by adding a few lines of custom CSS. Watch the video to see how I do this and if you want to grab the code for yourself, you can find it below.
Grab the CSS Styles Here!
Change the color of search input text
.et_pb_menu .et_pb_menu__search-input {
color:#ffffff;
}Change the search input container
.et_pb_menu .et_pb_menu__search-container {
background: #ffffff;
width: 50%;
height:50%;
bottom: 20px !important;
right:0 !important;
left:auto !important;
border-radius: 3px;
padding-left:20px !important;
}Change the color of the close search icon
.et_pb_menu_0_tb_header .et_pb_menu__icon.et_pb_menu__close-search-button {
color: #000000 !important;
}What if you want the tablet and mobile view to maintain the original style?
Easy. Add a media query to reflect the original styling. Some numbers can be adjusted if needed.
@media only screen and (max-width: 980px) {
.et_pb_menu .et_pb_menu__search-container {
background: none;
color:#ffffff;
width: 100%;
height:100%;
bottom:0 !important;
left:0 !important;
padding-left:115px !important;
}
.et_pb_menu .et_pb_menu__search-input {
color:#ffffff;
}
.et_pb_menu_0_tb_header .et_pb_menu__icon.et_pb_menu__close-search-button {
color: #ffffff !important;
}
}
Are you seeing an extra icon in the search field?
If you are seeing an extra ‘x’ to clear the search input—mostly likely in Chrome, Safari, or Microsoft Edge—you can get rid of it. Below is the CSS you can add to remove this extra icon.
/* clears the 'X' from Edge */
input[type=search]::-ms-clear {display: none; width : 0; height: 0;}
input[type=search]::-ms-reveal {display: none; width : 0; height: 0;}
/* clears the 'X' from Chrome and Safari */
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 {display: none;}
Resources
Here are links to the programs and sites I mentioned in the video.
Divi: https://bit.ly/3mun7TN
WordPress: https://wordpress.org/
Want to learn with me?
Check out my digital course, Recipe For A Sales Page on Udemy. This course features my recipe for a sales or landing page and identifies all the ingredients you need to make a compelling page that will capture your reader’s attention and turn them into paying customers.
Disclosure: Some of the links in this post are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission.
