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

TIPS

Jun 25, 2019 | Divi Tips | 0 comments

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

[html]
<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>
[/html]

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

[css]
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 */
[/css]

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

More Tips

Ad - Web Hosting from SiteGround - Crafted for easy site management. Click to learn more.

Cloudways Hosting

WPEngine Hosting

Pressable Hosting

AccuWeb Hosting

Ask the Divi Guy a Question

"*" indicates required fields