[Resolved] Search form on Mobile

Home Forums Support [Resolved] Search form on Mobile

Home Forums Support Search form on Mobile

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #502746
    Jacob

    Hi Tom,

    My ultimate goal is to have a mobile search form either in the mobile head section below top bar or in the mobile main navigation since my regular search form interferes with my mobile head.

    I have tried adding a mobile search form via the method described in your article “Adding HTML Inside the Mobile Header” with the help of the code snippet plugin and have copied the provided code into wp_head and replaced “Your mobile header HTML in here” with the snippet shortcut. Unfortunately, the code “add_action( ‘generate_inside_mobile_header’,’tu_mobile_header_html’ );
    function tu_mobile_header_html() { ?>” was visible on the page, before the top bar and a second search form appeared before the top bar (also on desktop/laptop). When I click execute php the whole site crashes.

    How do I include the search form into the mobil main menu or add a search form between top bar mobile main menu? Maybe via the hook generate_inside_mobile_header_menu, but I don’t know how. Thanks in advance for your help and kind regards, Jacob

    #503018
    Leo
    Staff
    Customer Support

    Hi Jacob,

    If I understand correctly, you should just have to activate GP’s navigation search:
    https://docs.generatepress.com/article/navigation-search/

    It will show up in the mobile header by default.

    Then we just have to hide it on desktop.

    Let me know if this works for you πŸ™‚

    #503473
    Jacob

    Hi Leo,

    Thanks for the reply. This works and the search magnifying glass appears in the mobile version only. But now the search magnifying glass interferes with the cart text which is positioned at the right side of the mobile menu.

    How do I solve this issue?

    Thanks in advance

    #503864
    Leo
    Staff
    Customer Support

    Would you prefer the cart icon instead of the cart text?

    If so make sure the load essential icons only option is not checked here: https://docs.generatepress.com/article/load-essentials-icons/

    Let me know if that works for you πŸ™‚

    #505100
    Jacob

    Its unfortunately the same when I untick the ‘load essential fontawesome icons only’ option. The magnifying glass interferes with the shopping cart icon then. Additionally, I would prefer to have the text instead of the icon. One remark because I don’t know if its relevant, the German text for ‘cart’ is ‘Warenkorb’ which is about twice as big. What else can I do to solve this issue? Thanks in advance.

    #505356
    Tom
    Lead Developer
    Lead Developer

    The overlapping is a current bug, which is fixed in the next version.

    For now, give this CSS a shot: https://generatepress.com/forums/topic/odd-display-error-on-two-websites/#post-473651

    Let me know πŸ™‚

    #505764
    Jacob

    Now it works, thanks a lot for your help guys. I will remove the CSS with the next update, correct?

    #506082
    Leo
    Staff
    Customer Support

    Yup that’s correct πŸ™‚

    #2317007
    Mary

    I used this to add the search icon on mobile and it worked great. (yipee!) Now how do I hide it on desktop as I already have a search icon?

    #2317014
    Mary

    I removed the search icon from the top menu, but now it’s off center. Is there a way to center it?
    Also, my mobile menu is not showing on mobile. (my main menu is) Is there a way to change that?

    #2317052
    Ying
    Staff
    Customer Support

    Hi Mary,

    This topic is quite old, I’m not sure if this is the best solution for today.

    Can you open a new topic and link us to your site? We’ll be happy to take a look!

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.