Creating a Divi MadMenu Header. Part 5: Search Form
This is the final part of the tutorials series in which we’ve been creatng the Divi MadMenu header template #13.
In this tutorial we are going to add the Search form to the header which will be sliding in from top from “behind” the main menu bar when the user clicks the search icon on the left side of the header.
If you haven’t done the previous tutorials (Part 1, Part 2, Part 3 and Part 4) I highly recommend you to do them first and then continue with this one.
However, you can also download the header template that we’ve done in Part 4, import it into the Theme Builder and follow this tutorial from where we left in the previous part.
Adding the Search Form
Search form is a popup and works much like the horizontal slide-in menu that we’ve created in Part 2.
However, this time we will not use just a module but a row to create the header search form that will slide in from top on search icon click.
Let’s add this row with the Search module into the same section which contains the row with the main menu bar, the horizontal slide-in menu and the login popup.
- Add the row.
- Add the Search module.
First, let’s set the row sizing in Row Settings -> Design -> Sizing:
- Set the row width to 80% for Desktop.
- Set the row max-width to 800px.
- Set the row width to 100% for Phone.
Let’s also adjust the row spacing in Row Settings -> Design -> Spacing.
Similar to the horizontal slide-in menu, we need to make sure the search form does not get covered by the main menu bar.
So, we need to apply top margin to the row equal to the height of the main menu bar.
Also, on desktop and tablet there needs to be a gap between the main menu bar and the opened search form. We will add this gap using the row padding-top.
- Set the row margin-top to 75px on Desktop.
- Set the row padding for Desktop and Tablet: 20px 0px 0px 0px.
- Set the row margin-top to 65px on mobile(both Tablet and Phone).
- Set the row padding for Phone: 0px 0px 0px 0px.
Now let’s add a unique ID to this row which will be used to create the search slide-in popup later in this tutorial:
- Add an ID to the row: searchForm (use a unique ID here, the one we used is for demonstration purposes only).
Adding the Search Button
The next step is adding the search toggle button(the search icon) to the header.
We’ll add the search icon using the same MadMenu module that we’ve used for creating the social icons toggle in Part 4.
For the social icons toggle we’ve used the Button One element of Divi MadMenu module, so, for the search toggle let’s use the Button Two element.
- Open the Layer view.
- Open the Divi MadMenu module settings (the one that we’ve used to create the social icons toggle).
- Enable the Button Two element which will be the search toggle.
- Update the module admin label to reflect the changes(optional).
As you can see in the screenshot above, the search toggle button is not aligned properly, we need it to be aligned horizontally to the right of the social icons button.
That’s because the module is applied a width of 50px and we need to increase that so that both buttons fit horizontally.
To do that let’s go to Design -> Sizing settings of Divi MadMenu module and change the module width and max-width to 105px:
Now let’s add the Button Two content, assign it the popup ID that we’ve added to the search row (searchForm), and apply the popup settings to make the search form slide-in/out on the search button click in MadMenu Settings -> Content -> Button Two:
- Leave the button text empty.
- Enable the icon and set the icon type to Image Icon.
- Add the image icon.
- Set the button type to Popup.
- Set the popup ID: searchForm.
- The toggle type must be Primary.
- Set the popup location to Top Center.
- Set the opening animation to Slide In Top.
- Set the closing animation to Slide Out Top.
- Make the search form hides when the user clicks outside.
- Set the z-index to 1(one), we need the search form to go “behind” the main menu bar when closed.
To style the search toggle go to Design -> Button Two, it should have the same styling as the social icons toggle button:
- Set the margin: 0px 0px 10px 0px.
- Set the background color: rgba(255, 255, 255, 0.15), hover background color should be rgba(255, 255, 255, 0.25).
- Make the toggle button circular by applying a 50px border radius.
- Set the image icon width to 20px.
- Remove the button border: 0px.
The search toggle is now ready and is working(if you click it the search form will slide in/out). Next, let’s style the search form.
Styling the Search Form
This part is optional, you can apply any design you want, but we’ll style it similarly to the overall design of the header.
So, let’s go to the Search module content settings and add the content:
- Add the placeholder text: Search… (Search Settings -> Content -> Text).
- Enable the search form button for Desktop and Tablet (Search Settings -> Content -> Elements).
- Disable the search form button for Phone (Search Settings -> Content -> Elements).
Next, go to the Search Settings -> Design -> Field and Search Settings -> Design -> Button Text sections and apply these settings:
- Placeholder text color: rgba(255, 255, 255, 0.85).
- Field background color: #002366.
- Field text color: #ffffff.
- Field focus background color: #002366.
- Field focus text color: #ffffff.
- Field font: Montserrat.
- Field font weight: Medium.
- Field text size: 16px.
- Button and Border color: #fa8072.
- Button font: Montserrat.
- Button text color: #ffffff.
You can also make the button font semi-bold and uppercase.
Finally, let’s adjust the search form spacing, sizing and border settings:
- Width: 100%.
- Padding: 14px 14px 19px 15px.
- Border radius for Desktop and Tablet: 2px.
- Border width: 0px.
- Border readius for Phone: 0px.
And that’s it, the search form is ready.
In this tutorial we’ve added the search form to the header we’ve been creating throughout this tutorials series.
The header search form slides in and out when the user clicks the search button on the left side of the header.
This was the last part of the header that we needed to create, the final version of this header template is available with the Divi MadMenu extension, it’s the demo header template #13.
Hope you’ve learned a lot about how to use the Divi MadMenu and get the most out of it while creating this header template step by step. If you have any thoughts and suggestions feel free to share them in the comments section below.
View Live Demos & Get Divi MadMenu
Download FREE Divi Sections
Download Divi Freebies!
Join our mailing list to receive exclusive FREE file downloads, news and updates right in your inbox.