Adding a Search Box to Mobile Slide Out Menu

Hi there,

You can add a Search Widget to the Off Canvas panel – in Customizer > Widgets > Off Canvas.

Thanks, Elvin. Is there a way to style just that particular search form? It doesn't really fit in the mobile menu and I would like it displayed at the top of the mobile menu instead of the bottom.

thanks,

Dave

Hi there,

try adding this CSS:

#generate-slideout-menu .inside-navigation {
  flex-direction: column-reverse;
}

#generate-slideout-menu .inside-navigation {
  flex-direction: column-reverse;
  flex-wrap: nowrap;
}

.slideout-widget.widget_search {
  margin: 10px;
  max-width: 100%;
  padding: 10px;

}

.slideout-widget.widget_search button {
  display: none;
}

Thanks David. Is there a way to make the text inside the button say "search website name"?

cheers,

Dave

You can use Add PHP this snippet:

function db_filter_search_form_placeholder( $html ) {
  $html = str_replace( 'placeholder="Search ', 'placeholder="Your custom text here ', $html );
  return $html;
}
add_filter( 'get_search_form', 'db_filter_search_form_placeholder' );

Thanks. That works. Can I make the font smaller in the search box?

cheers,

Dave

Hi Dave,

Try this CSS, you could play around with the numbers:

.page-hero input[type="search"] {
    font-size: 10px;
    padding: 20px 50px 20px 10px;
}

Let me know :)