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

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]

Need help with this?
Hire me for a consultation and I'll walk you thru the process.

0 Comments

Submit a Comment

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

5 star reviews
"WOW! Money WELL spent. Joseph was incredibly knowledgeable in helping me make some final tweeks to my Divi website. He was very caring and went above and beyond. Will 100% use him for any future Divi website needs."
Claire - CMMC

5 star reviews
"You really get what you pay for with Joe. He does more than simply build a website, he sets up websites for success. Functional, clean, professional designs and he keeps up/implements the latest plugins and technology. Thank you Joe. I will continue to refer you work."
Mark Winger

5 star reviews
"The best WordPress guy I’ve worked with on WordPress, hands-down (and I’ve worked with dozens). Remarkably good with theme customizations with a quick turn. Kept it on budget as well. A rarity with hourly contracts."
Nate Wright

5 star reviews
"Thanks for your prompt reply. You’re always so comprehensive. If we could write another review just for your communication skills, then we would."
Alex N

More Tips

Ask a Question

"*" indicates required fields