search icon in header on mobile

• 

  Tagbag

  |

  Participant

  | February 22, 2019 at 8:29 am

  Hey, is it possible to display the searchform of the desktop, on the mobile too?
  

  Regards

  Site URL: hidden

  Theme version: .

  #209627 copied to clipboard
  

  Rose Tyler

  |

  Keymaster

  | February 22, 2019 at 8:56 am

  Hello,

  Please try this code:

  @media only screen and (max-width: 992px) {
      .navbar-header .header-search {
          display: inline-block;
      }
      .header-search.act-full-width .search-btn {
          z-index: 9;
          margin-top: 10px;
      }
      .et-header-full-width .navbar-header {
          padding-right: 5px;
          width: 100% !important;
          position:  absolute;
          height: 50px;
          top: 25px;
      }
      .header-search.act-full-width input[type="text"],
      .header-search .et-icon {
          font-size: 1.5rem !important;
      }
  }

  Regards

  #209630 copied to clipboard
  

  Tagbag

  |

  Participant

  | February 22, 2019 at 9:18 am

  ok, there is a search icon now. but it does not work 😀 and i can not click on the hamburger menu anymore ^^

  Regards
  Joey

  #209632 copied to clipboard
  

  Rose Tyler

  |

  Keymaster

  | February 22, 2019 at 9:36 am

  Please change the previous code to:

  @media only screen and (max-width: 992px) {
      .navbar-header .header-search {
          display: inline-block;
      }
      .header-search.act-full-width input[type="text"],
      .header-search.act-full-width.search-open i:before {
          font-size: 1.2rem !important;
      }
      .header-search.act-full-width.search-open i:before {
          margin: 16px 5px;
      }
      .et-header-full-width .navbar-header .search-open {
          padding-right: 5px;
          width: 100% !important;
          position:  absolute;
          height: 50px;
          left: 0;
      }
  }

  Regards

  #209634 copied to clipboard
  

  Tagbag

  |

  Participant

  | February 22, 2019 at 9:59 am

  Strange. If I set Chrome to mobile size, it works, but if I retrieve the page directly from the mobile, the search bar does not work ^ ^

  #209635 copied to clipboard
  

  Rose Tyler

  |

  Keymaster

  | February 22, 2019 at 10:58 am

  This situation can be caused by 3rd party plugins or your changes in files.
  On my test site, the search can be enabled by css code and works fine on mobile.

  Regards

  #209640 copied to clipboard
Viewing 6 results
1 through 6 (of 6 total)