Site logo

[Resolved] How to add search bar to mobile bar (primary navigation)

Home Forums Support [Resolved] How to add search bar to mobile bar (primary navigation)

Home Forums Support How to add search bar to mobile bar (primary navigation)

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1770776
    Amit

    Hello
    I am new to GP, so forgive me if this has been asked. I have searched the forums, but am unable to locate the answer to my question.

    I would like the following layout:

    Logo – Search Bar (not just the magnifying glass) – Hamburger Menu

    How do I get the Search Bar to show up? I have GP Premium. I understand I can enable Navigation Search from Customize->Layour->Primary Navigation. But that only adds the magnifying icon and it appears to the right of the hamburger menu.

    #1771101
    David
    Staff
    Customer Support

    Hi there,

    i see you have used the method provided here:

    https://generatepress.com/forums/topic/customize-header-like-target-and-add-switcher-language/#post-1765401

    If you can share a link to your site i will help with the other styling requirements

    #1771629
    Amit

    David
    Thanks for the response. Yes, your method works well. I just need to understand how to position the Search Bar in the middle of the Logo and the Shopping Cart icon.
    Here is the URL:
    https://staging-tacknridercom.kinsta.cloud/

    #1771827
    Ying
    Staff
    Customer Support

    Hi Amit,

    Try this CSS:

    #mobile-header .aws-container {
        order: -1;
    }
    #1775043
    Amit

    Hi Ying
    That works!! Do you know of any resources that I can use for learning these CSS tricks?

    David and Ying,
    Thank you so much for your help!

    #1776202
    Ying
    Staff
    Customer Support

    I would recommend Codecademy personally.

    This is where I learned CSS from 🙂

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