Search on mobile devices

BB Theme
1

Hi!

The search icon in the nav doesn’t appear on mobile devices. I used css:

.fl-page-nav-search {
display:block !important;
}

But in my opinion, this isn’t the best option to show the search on mobile. Do you have an alternative for a search icon or page on mobile devices?

Kind regards, Peter

2

Hey Peter,

Just letting you know that we are looking into this and will get back to you shortly.

Thanks!

KC

3

Hey Peter,

I agree that’s not the best way to do it. This isn’t really a bad idea for a feature request so if you have a minute, feel free to add this on our User Voice. :slight_smile:

In the meantime, you can add the Search widget on the page and set it so it only shows on mobile. Or just add it as a widget on your footer so it appears on all pages.

Ben

4

Hello Ben

I’d like to re-visit this if I may. Peter(Jorrit) is correct. I don’t think this is a server issue either because When I go to mobile view the search icon is set to display:none in the CSS file so it isn’t from the server that’s making it disappear.

I need the search to be available even on a mobile device and I’d like it to stay in the mobile menu. I’m not sure why it isn’t able too, that seems to be a bootstrap feature if I’m not mistaken.

Any ideas on how to make the search be available in mobile view?

Thank you,
Mark

5

Hi Mark,

This isn’t a server issue, it is by design. However, if you want to add the search form to your site without having to use custom CSS and the !important declaration. Then you can add the following code to your child themes functions.php file.

add_action( 'fl_before_header', 'search_on_mobile' );
  function search_on_mobile(){
    if ( wp_is_mobile() ) {
      get_search_form();
    }
  }

This will add a search form to all mobile devices i.e. tablets and mobiles. Please, be aware that if you resize your browser, the search form will not appear. As that is only a basic test for responsive design. When the code has been added, view your site on a tablet or phone and a search form should appear above the header.

Like so - https://cloudup.com/cWLAvABnrV9

Thanks,
Danny

6

Excellent! Thanks, Danny.

Could you also tell me where I can find the placeholder text for the search? I want to customize that as well.

Thank you,
Mark

7

Hi Mark,

You could create a new file in your BB child theme directory and call it searchform.php then copy the contents from thesearchform.php file in the main BB Theme.

Then edit the form to replace the placeholder Search with whatever you like.

Thanks,
Danny

8

Awesome! Thanks agin Danny!

9

No problem, Mark.

Thanks,
Danny