How to add a search box to Divi header in the secondary menu

Divi Tips

Add the following to a menu item in the Secondary Menu. Replace the action to use your site URL.

<form role="search" method="get" id="searchform" class="searchform" action="https://www.yourwebsite.com">
<div><input type="text" placeholder="Search" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="Search"></div>
</form>

Then add the following CSS to your Divi theme options area and customize however you like.

input#searchsubmit {
    color: #717174!important;
    background: #ffffff;
    border-color: #ffffff;
    border:1px solid #ffffff;
    border-radius: 0px;
    letter-spacing: 1px;
    font-size: 14px;
    font-weight: 500!important;
    text-transform: uppercase!important;
    padding: 2px 7px;
}
.et-search-form input.et-search-field {
    height: 27px;
    padding: 6px 12px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
#et-secondary-menu>ul>li>a:hover {opacity:1 !important;} /* removes rollover effect so search box does not darken on rollover */