Search Bar does not show in Mobile Theme

  • Ares

    (@ismartpink)


    1 year, 11 months ago

    I use Storefront Theme without any plugins. By default, the search bar doesn’t show on mobile view and requires simple CSS “display: inline” to work. But then it stays on a separate block below the logo and menu button, that’s not good.

    How do we make it stay on the same block with the logo and the menu button? I prefer not to use CSS “position: absolute” because then we can’t use “width:max-content” for safe maximum expansion in size.

    Does anyone come with php/html solution?

    https://ibb.co/MGsXNQR

    • This topic was modified 1 year, 11 months ago by Ares.
    • This topic was modified 1 year, 11 months ago by Ares.
Viewing 1 replies (of 1 total)
  • Saif

    (@babylon1999)

    Hello @ismartpink,

    The search bar is triggered when the button is clicked on the mobile view as there is no space to enter the full bar.

    If you’d like to show the search bar in the header regardless, you can try adding the following CSS snippet:

    /*  Change search bar behavior  */

.woocommerce-active .site-header .site-search {
  width: 49% !important;
  float: left !important;
  clear: none !important;
}

.site-search {
  display:block !important;
}


.search{
  display: none !important;
}

.storefront-handheld-footer-bar ul.columns-3 li {
  width: 50%;
}

    Screencast: https://d.pr/v/dy9kCN

    Hope this helps!

Viewing 1 replies (of 1 total)
  • The topic ‘Search Bar does not show in Mobile Theme’ is closed to new replies.