Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • September 27, 2016 at 5:37 am #692058
    chasteandswank

    Since the last update I’ve lost the search bar on my mobile device(smart phone). I ‘ve tried the code in earlier posts and they did not solve the problem. Just wondering if there is a new issue since the last update and I have not found the thread with the solution.

    September 27, 2016 at 4:12 pm #692322
    Vinay

    Hey chasteandswank,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 767px) {
.main_menu .avia-menu, #header_main_alternate {
  display: block !important;
}
.av-main-nav > li { display: none; }
li#menu-item-search {
  display: block!important;
  margin-top: -90px;
  right: 70px;
}
.responsive .main_menu {
  float: right;
}}

    Best regards,
    Vinay

    September 28, 2016 at 1:16 pm #692586
    chasteandswank

    Hi.
    Thanks for the code. It works in child themes style css but not in quick css??
    There is a problem though, it appears in the centre of my logo, either on top or behind.
    I have played around with the top and right margins but that just moves the cart and drop down menu with it??
    Maybe it needs to go in the top menu as a fix?
    I’ll leave it so you can take a look. The problem is on a smart phone (mobile) view.

    September 28, 2016 at 1:37 pm #692609
    Vinay

    Hi,

    There is simply not enough space on the mobile view to fit all the 3 icons with the logo .

    Please reduce the logo size and it should look good.

    @media only screen and (max-width: 480px) {
.responsive .logo img {
    max-height: 62px!important;
}}

    Best regards,
    Vinay

    September 28, 2016 at 1:50 pm #692628
    chasteandswank

    Awsome! That worked. There is another issue now, when the search box opens it is off the left side of the screen so you only can see the right side of the box. When you type in a search you can’t see what you type as is is off the left side of the screen??
    Is there a way to get the search in the top header? I’ve tried this https://kriesi.at/support/topic/search-icon-on-mobile-devices/ but I end up with [avia_search] in the top menu instead of teh search icon.

    September 28, 2016 at 3:18 pm #692734
    Vinay

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 480px) {
li#menu-item-search {
    right: 0px!important;    
}
.avia-search-tooltip {
    margin-left: -86px!important;
}
}

    Best regards,
    Vinay

    September 28, 2016 at 10:26 pm #692891
    chasteandswank

    Hi.
    I added all 3 pieces of code. Now the search magnifying glass is behind the cart and hamburger menu. If I tilt the mobile phone to landscape it appears.

    September 30, 2016 at 8:50 am #693565
    chasteandswank

    Hi.
    It was there all along just hidden.
    I came up with this and it seems to work –

    @media only screen and (max-width: 480px) {
    .responsive .logo img {
    max-height: 62px!important;}}@media only screen and (max-width: 767px) {
    .main_menu .avia-menu, #header_main_alternate {
    display: block !important;
    }
    .av-main-nav > li { display: none; }
    li#menu-item-search {
    display: block!important;
    margin-top: -90px;
    right: 110px;
    }
    .responsive .main_menu {
    float: right;
    }}
    @media only screen and (max-width: 480px) {
    li#menu-item-search {
    right: 110px!important;
    }
    }

    Thanks again for your help

    September 30, 2016 at 6:53 pm #693989
    Vinay

    Hi,

    Glad it’s sorted for you!
    Thank you for using Enfold :)

    Best regards,
    Vinay

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘search bar missing on mobile’ is closed to new replies.