[Support request] Adding a Search Box to Mobile Slide Out Menu

Home Forums Support [Support request] Adding a Search Box to Mobile Slide Out Menu

Home Forums Support Adding a Search Box to Mobile Slide Out Menu

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1653706
    Dave

    I would like to add a search box in the mobile slide out menu.
    Any idea how I can achieve this.
    I have included and example in the Private info.

    Cheers,

    Dave

    #1653904
    Elvin
    Staff
    Customer Support

    Hi there,

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

    A wise man once said:
    "Have you cleared your cache?"

    #1654317
    Dave

    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

    #1654586
    David
    Staff
    Customer Support

    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;
    }
    #1654592
    Dave

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

    cheers,

    Dave

    #1654726
    David
    Staff
    Customer Support

    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' );
    #1654845
    Dave

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

    cheers,

    Dave

    #1654993
    Ying
    Staff
    Customer Support

    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 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.