Tagged: 

Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #430372

    Hi guys,

    how do i get a search button to show up on mobile devices? It doesn’t matter if it’s outside of the mobile drop-down menu or inside.

    I’ve already tried the following method and it didn’t work, meaning the search icon disappears if the screen is smaller than a certain size and the normal navigation menu gets replaced by the square, drop-down menu.
    https://kriesi.at/support/topic/search-icon-for-mobile-theme/

    Let me know.

    Regards,

    #430920

    Hi jacktherippa!

    Can you please post he link to your website?

    Cheers!
    Yigit

    #430997
    This reply has been marked as private.
    #431521

    Hey!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @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;
    }}

    Regards,
    Yigit

    #434720

    sorry for the late reply! that did the trick, thank you but it should really be an option within the theme.

    #435053

    Hey!

    Glad you got it fixed, you can add a feature request here: https://kriesi.at/support/enfold-feature-requests/

    Regards,
    Rikard

    #465131

    I agree, it should be part of the theme, because by default there is no search option in mobile although that’s when people need search the most. I opened a request.

    In the meantime, the code above will create a logo on top of my logo.
    checkout http://www.gentlemansgazette.com to see for yourself.

    My goal is to have

    1. a mobile search icon outside the menu so people can see and use it.

    2. a mobile search icon or search tab inside the menu.

    Is that possible, and can you please help me with it?

    #465135

    Thanks in advance!

    Actually, I played around with it and I get the search icon, but how to I move the mobile menu further to the left?

    Ideally, I want

    1. move it further left on tablets
    2. move it just a bit on mobile
    3. on tablet in horizontal view, the category menu overlaps with our logo… how can I fix that?

    #465139

    This is what I have so far, and although it is close, it is not ideal. I think I need separate setups for tablets and mobile phones…

    @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: -86px;
      right: -25px;
    }
    .responsive .main_menu {
      float: right;
    }}
    li#menu-item-search>a {
    font-size: 28px!important;
    }
    nav.main_menu { float: right; margin-right: -0.6%; margin-top: 2%;  }
    #466099

    Hi guys,
    Can you help me with this? Thanks in advance.

    #466489

    Hey!


    @gentlemansgazette
    Do you mind creating a temporary admin login and posting it here privately ?

    Best regards,
    Yigit

    #466563

    Here you go

    #466573

    Hi!

    Also “Google Authenticator” is needed to login

    Cheers!
    Yigit

    #744466

    Hi guys!!

    I have tried adding the code but I get two hamburger menus on mobile (it looks very weird) I removed it.

    Am I missing something?

    Thank you!!! :)

    Warmly,

    Havi
    PS: It would be great if there would be a search option inside of the mobile menu (like we could add it when we build the menu or something)

    /*add search to mobile menu*/
    @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: -86px;
    right: -25px;
    }
    .responsive .main_menu {
    float: right;
    }}
    li#menu-item-search>a {
    font-size: 28px!important;
    }
    nav.main_menu { float: right; margin-right: -0.6%; margin-top: 2%; }

    #746565

    Hi,

    we can’t login, as Yigit already mentioned (Google Authenticator). Can you check please?

    If you want different codes for different screen sizes, then you need to work with media queries. Check out this for more information about it: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Best regards,
    Andy

    #746577

    HI Andy!
    I didn’t give you the site’s credentials but I will shortly…

    Does your comment mean that there’s a media query missing from here?

    li#menu-item-search>a {
    font-size: 28px!important;
    }
    nav.main_menu { float: right; margin-right: -0.6%; margin-top: 2%; }

    I actually copied the code from another ticket I found on the forum, so I am not sure if it’s the right one.

    I will add the code again to the site and send you the credentials. :)

    Warmly,

    Havi

    #746599

    Hi andy!! Sending you the credentials!! :)

    Still getting two hamburger menus. :(

    Warmly,
    Havi

    #747052

    Hi,

    so use this code for iPhone screen size to hide the burger menu:

    @media only screen and (max-width: 767px) {
    #menu-item-burger {
    display: none !important;
    }}

    Best regards,
    Andy

    #748090

    Thank you, Andy!!

    Here’s my code to do this. all in one piece just in case somebody wants to use it. I added a bit less margin for the search button as it was a bit under the hamburger menu. Tried to add a bit more space between them but this is as far as I can go. Suggestions are always welcome!! :)

    Warmly,

    Havi

    /*add search to mobile menu*/
    @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: -86px;
    right: -27px;
    }
    .responsive .main_menu {
    float: right;
    }}
    @media only screen and (max-width: 767px) {
    li#menu-item-search>a {
    font-size: 28px!important;
    }
    nav.main_menu { float: right; margin-right: -3.1%; margin-top: 2%; }}
    @media only screen and (max-width: 767px) {
    #menu-item-burger {
    display: none !important;
    }}

    #749302

    Hi,

    glad you could make it work. Let us know in a new ticket if you have some more questions about the theme. We’re glad to help you out.

    Best regards,
    Andy

Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘Search button on Mobile’ is closed to new replies.