How To Make Search Available On Mobile Devices With Beaver Builder Theme

How To Bring Search To All Device Sizes With Beaver Builder Theme

A lot of WordPress themes don’t effectively allow you to search the site across all devices. Sometimes the search button disappears in mobile. Other times it’s on the sidebar which floats below the main content in mobile view, therefore, pushing it out of easy access.

I wanted search to be easily accessible from anywhere on my website, as easy as the main navigation is to access. The theme I am using is the Beaver Builder theme and the search icon only displays in the full desktop view. The tablet view hides the search icon and the mobile view does also.

My goal was to show the search icon across the desktop and tablet views of my website and find a way to make it usable on a mobile device. Showing it on a tablet device was easy with a little CSS (see below) but the mobile version wasn’t as easy.

The solution I liked from other websites was having the search available in the menu drop-down when tapped. See this image and notice how search is always available if the main navigation is available.

Your Brand by Nick Leffler mobile menu with search box.

From anywhere on my website a visitor can open the mobile menu, tap in the search box, type their search terms, and tap the built-in search button on the mobile keyboard. I purposely wanted to remove the search button on the search box itself for part aesthetic reasons and part ease of use reasons. The fewer options to complete a task the easier it is to complete (less cognitive resistance).

That’s what the solution looks like, now it’s time for the details of how I did it.

Show Tablet Search Button

The first thing I need to do is show the search button for tablet devices. Why it defaults to hidden in the Beaver Builder theme I’m not sure but it does so I had to take care of it with CSS.

The following CSS tells the search icon div (.fl-page-nav-search) to inherit the display settings (block) from its parent div only for the pixel range from 768px to 991px. I added the 25px on the right so it wasn’t running right up against the edge of the tablet screen. Have you ever tried to tap a button that was right on the edge? It’s not easy sometimes.

@media (min-width:768px) and (max-width:991px) {
.fl-page-nav-search {
display: inherit;
right: 25px;
}
}

That’s it for the tablet screen! Nothing more is needed there so that one was really simple. The next one wasn’t nearly as simple though because I had to add a search box and write a bit more CSS code to hide stuff and format some other stuff.

The Plugin

The first thing that’s needed to pull of the mobile menu search is a cool plugin I found. It’s a free plugin and it lets you put a search box as a menu item.

Pretty slick!

The plugin I used is Bop Search Box Item Type For Nav Menus but any plugin that accomplishes a similar thing can be used. A lot of the code I used below is specific to this plugin, though.

Next up I needed to add the search box to the menu.

Add The Search Box

This part is pretty easy but it did throw me for a bit of a loop because I always forget about the WordPress Screen Options drop down. I’ll explain later.

To add the search box just head over to menu in the WordPress Appearance section and select the correct menu you’d like to add the search box to. Now you just have to click the Search Box option and Add to menu. You can now position the search box in the menu wherever you want it, just drag it up, down, left, or right.

Adding the search box to a WordPress menu.

Title Attribute

Notice the Title Attribute in the screenshot above? You probably don’t have that by default and this is a pretty important option to have enabled. This is what threw me for a loop for a few moments.

You can enable this option at the top of the menu screen in WordPress by clicking Screen Options and then selecting Title Attribute. That’s all you have to do and it’s enabled for all menu items.

Now for what it does.

If you scroll back up and look at my example of how the search box looks you’ll notice the word ‘Search’ inside the box in light grey text. You can change that text to whatever you want by modifying the Title Attribute.

Pretty cool huh?

Now I need to hide the search button because it looked bad in such a compressed space.

Hide Search Button

By default, the search box the plugin adds has a button to the right of the search box. It’s ugly and doesn’t fit well even with formatting so it has to go.

There is some simple PHP that doesn’t need any modifying available from the plugin developer. I had to dig a bit but I was able to find it.

Just add the following code to your functions.php file and save it. Now the search box doesn’t have a button, it’s just a box to tap in.

// Hide Menu Search Button
add_filter( 'bop_nav_search_show_submit_button', function( $bool, $item, $depth, $args ){
$bool = false;
return $bool;
}, 10, 4 );
// End hide menu search button

That looks better but the default search box the plugin provides also puts some text before the search box, that has to go also.

Change Search Text

A little more PHP for the functions.php files will remove the text before the search box. This would be great if  I had more room perhaps, but I don’t so it has to go for the mobile menu.

Here’s the code for the functions.php file to remove the search description text.

// Change menu search text
add_filter( 'bop_nav_search_screen_reader_text', function( $text, $item, $depth, $args ){
$text = ''; //for nothing
$text = __( '', 'myslug' ); //to change - the __() is for theme translation
return $text;
}, 10, 4 );
// End change menu search text

So far everything is pretty easy but there were still some snags I ran into when setting this up. Snags such as the search box not showing up at all.

Enable HTML5 Form Support

Because the whole goal was for a search box to show up in the mobile view, I had to find a fix for that problem. For this, I found a solution in that the Beaver Builder theme apparently doesn’t have HTML5 support enabled by default.

This following code goes in the functions.php file also and makes the search box look good and also makes it work.

// HTML5 support for forms
add_action( 'after_setup_theme', function(){
add_theme_support( 'html5', array( 'search-form' ) );
} );
// End HTML5 support for forms

Good stuff, the search box in the mobile menu now works well. There are still a few big problems remaining in addition to the formatting though. I’ll take care of that with a bit of CSS code.

CSS Code To Format It

Now it’s time to tie everything together. You can format it how you want but I used the CSS code to format mine. The one important piece of CSS is the first section.

This section makes sure the new search box is hidden for the tablet and desktop views. The Beaver Builder theme already has the nifty search icon that visitors can click to search so they don’t need a big ugly search box also.

It does look ugly if you leave it too!

Here’s the CSS to hide it on screen resolutions bigger than 768px:

@media (min-width:768px) {
.menu-item-type-search {
display:none;
}
}

These two styles are to format the search box so it looks good in my menu. Your CSS will probably be different because this might not fit your site style very good.

The container the search box was contained in wasn’t 100% the width of my menu drop down so that had to change. I wanted it to fill the whole thing up so it was more tapable by giant fingers. The 4px was just a bit of aesthetics but I’m looking at it now and it probably should be 5px.

.menu-item-type-search label {
width:100%;
margin-top:4px;
}

Now it’s time to do a bit of formatting for the search box itself. I wanted it a specific height to be tapable and also fit the menu properly so I had to give it a custom height. Unfortunately, it involved using !important which isn’t ideal, but I haven’t had time to go back and figure out a better way yet.

I also didn’t want the search box bumping up against the left and right borders so I had to add the 98% thing. Again with the !important but I saw no other way around it at the time aside from spending hours figuring out another way. No thanks. Of course, the margin is to center the whole thing and make it look purty.

.search-field {
height:45px!important;
width:98%!important;
margin:0 auto;
}

What I Ended Up With

That’s it! This is all the code I used to make my search box available in a mobile view and also available on tablets too. It didn’t take that long to figure out but I did have to do a lot of digging through the support forums on the WordPress site and also through the FAQs.

I say it was pretty fun to figure out and I always feel accomplished when I do something like this. I of course started by asking in the Beaver Builder forum if anybody had done this but I didn’t get any answers for what I was looking for.

Hopefully, if someone else is trying to figure something out like this they’ll find this article and have an even easier time than I did.

You already saw what I ended up with at the beginning (oops I gave it away!) but here it is again:

Your Brand by Nick Leffler mobile menu with search box.

What do you think? Is this a useful way to let visitors search the site on a mobile device? Do you know of a better way or have another preference? Please share if you do!

6 Comments

  1. Simon on February 7, 2018 at 9:45 am

    This works great! Thank you!

    And remember, because Beaver Builder theme runs on Bootstrap you only need to add ‘visible-xs’ to the CSS classes field in Menus, to hide it on anything larger than mobile.

    • Nick Leffler on February 7, 2018 at 10:23 am

      Thanks Simon, I will check that out! I guess I’m so stuck in the hand coding everything that I overlook the fact that Beaver Builder is built on Bootstrap.

  2. Patrick on June 21, 2017 at 9:05 am

    In 2017 this is still working. Thank you very much for sharing, saved me lots of time.

    • Nick Leffler on June 24, 2017 at 9:27 am

      Glad to hear it worked out for you 🙂

  3. Chris Giovagnoni on November 16, 2016 at 12:35 pm

    Thanks for this post. It addressed my issue precisely, clearly and easily. And it worked perfectly. Fantastic!

    • Nick on November 16, 2016 at 12:42 pm

      Awesome! Glad it was helpful and all worked out =)

Leave a Comment