Creating Full Screen Overlay Search Form

Download & Install Full-screen Overlay Content Module

In this tutorial I am using the premium plugin Full-Screen Overlay Content module. After purchase the module, you will download the product file from confirmation mail (check your inbox) or My Account page. Now install the plugin from WordPress Plugin screen.

Creating Search Form

Creating a search form layout with Beaver Builder “Templates” post type.

1. Navigate to Builder -> Templates
2. Click on Add New button
3. Enter the title
4. Select Full Screen Overlay Content template from Post Attributes meta box
5. Hit on Publish button
6. Click on Page Builder button and launch the builder
7. Drag&Drop the HTML module at content area
8. Enter following HTML code into text area

   <form method="get" role="search" action="/" title="Type here to search" class="fs-search-form">
   	<input type="search" class="fl-search-input form-control" name="s" placeholder="Type here to search" />
   	<button type="submit" title="submit"><i class="fa fa-angle-right"></i></button>
   </form>

9. Edit the Row Settings (click on wrench icon)
   1. Width: Full Width
   2. Content Width: Full Width
   3. Height: Full Height
   4. Content Alignment: Center
   5. Background Color: #ffffff
   6. Opacity: 95
   7. Click on Save button
10. Click on Done -> Publish button

Adding the Search Button at Header

I am using the Beaver Themer add-on for header layout. Yet you have not Beaver themer add-on, still you can make the header with Beaver Builder plugin. Checkout this video which is made by our favourite community member David Waumsley.

Adding Custom CSS

Need some custom CSS for professional look. Open the style.css file of your child theme or you can add it other place.

/* Full Screen Overlay Search Form */
.fs-search-form {
	border-bottom: 1px solid #bbb;
	display: table;
	max-width: 750px;
	margin: 0 auto;
	width: 100%;
}

.fs-search-form input[type=search],
.fs-search-form button {
	background: none;
	border: none;
	border-radius: 0;
	color: #333;
	display: inline-block;
	font-size: 45px;
}

.fs-search-form input[type=search] {
	float: left;
	padding: 40px 0;
	width: calc(100% - 45px);
}

.fs-search-form button {
	color: #f66;
	float: right;
	line-height: 70px;
}

.fs-search-form button:hover {
	color: #666;
}

@media only screen and (max-width: 992px)
{
	.fs-search-form {
		max-width: 550px;
	}

	.fs-search-form input[type=search] {
		font-size: 35px;
		padding: 30px 0;
	}

	.fs-search-form button {
		line-height: 50px;
	}
}

@media only screen and (max-width: 767px)
{
	.fs-search-form {
		max-width: 450px;
	}

	.fs-search-form input[type=search] {
		font-size: 25px;
	}

	.fs-search-form button {
		line-height: 45px;
	}
}

@media only screen and (max-width: 580px)
{
	.fs-search-form {
		max-width: 300px;
	}

	.fs-search-form input[type=search] {
		font-size: 16px;
	}
}

.fs-search-form input[type=search]::-webkit-input-placeholder {
	color: #666!important;
}

.fs-search-form input[type=search]::-moz-placeholder {
	color: #666!important;
}

.fs-search-form input[type=search]::-ms-placeholder {
	color: #666!important;
}

.fs-search-form input[type=search]:focus::-webkit-input-placeholder {
	color: #999!important;
}

.fs-search-form input[type=search]:focus::-moz-placeholder {
	color: #999!important;
}
.fs-search-form input[type=search]:focus::-ms-placeholder {
	color: #999!important;
}

All are done. Now refresh the site, click on the search button and see the effect.