Tagged: 

Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • April 17, 2015 at 4:23 pm #430372
    jacktherippa

    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,

    April 19, 2015 at 7:21 pm #430920
    Yigit

    Hi jacktherippa!

    Can you please post he link to your website?

    Cheers!
    Yigit

    April 19, 2015 at 11:05 pm #430997
    jacktherippa
    This reply has been marked as private.
    April 20, 2015 at 7:08 pm #431521
    Yigit

    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

    April 25, 2015 at 5:31 pm #434720
    jacktherippa

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

    April 27, 2015 at 7:24 am #435053
    Rikard

    Hey!

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

    Regards,
    Rikard

    June 26, 2015 at 10:30 pm #465131
    gentlemansgazette

    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?

    June 26, 2015 at 11:25 pm #465135
    gentlemansgazette

    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?

    June 26, 2015 at 11:42 pm #465139
    gentlemansgazette

    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%;  }
    June 29, 2015 at 11:36 pm #466099
    gentlemansgazette

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

    June 30, 2015 at 3:06 pm #466489
    Yigit

    Hey!


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

    Best regards,
    Yigit

    June 30, 2015 at 4:44 pm #466563
    gentlemansgazette

    Here you go

    June 30, 2015 at 5:19 pm #466573
    Yigit

    Hi!

    Also “Google Authenticator” is needed to login

    Cheers!
    Yigit

    February 8, 2017 at 7:36 pm #744466
    havi

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

    February 13, 2017 at 6:48 pm #746565
    Andy

    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

    February 13, 2017 at 7:34 pm #746577
    havi

    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

    February 13, 2017 at 8:17 pm #746599
    havi

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

    Still getting two hamburger menus. :(

    Warmly,
    Havi

    February 14, 2017 at 7:03 pm #747052
    Andy

    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

    February 16, 2017 at 6:36 pm #748090
    havi

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

    February 20, 2017 at 1:20 pm #749302
    Andy

    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

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