[Resolved] Adding search to header with custom width for mobile/desktop

Home Forums Support [Resolved] Adding search to header with custom width for mobile/desktop

Home Forums Support Adding search to header with custom width for mobile/desktop

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1585050
    William

    Hi there,
    I have a plugin that allows AJAX searches which I want to have on display in the header.

    It is similar to the like of this, this, and this website.

    The website I am adding such code to is here.

    Is there a way to do this? I would also appreciate a drop down like the above examples too for mobile.

    I would like the search bar to appear to the right of the logo for desktop, before the navigation menu.

    Many thanks if this is possible.

    #1585224
    Leo
    Staff
    Customer Support

    Hi there,

    Just to confirm, you’d like to add the search box here?
    https://www.screencast.com/t/XpJhWPvY7C

    Keep in mind that positioning there would leave very little to no space when the window shrinks.

    If you want to give it a shot, try adding it using the generate_inside_navigation hook first using a hook element:
    https://docs.generatepress.com/article/hooks-element-overview/

    And wrap it in a div like this:

    <div class="custom-search-form">
        search here
    </div>

    The mobile drop down option would require a custom solution that modifies the plugin’s code unfortunately.

    #1585737
    William

    Thanks for that – I see the search in the desktop menu, is there a way to make it a big wider (see here).

    I’m confused what you mean with little to no space when window shrinks – I’ve made the menu slightly smaller and it would help if the default search button could be removed too?

    As for the mobile version, is there a way to have the search button once click show a drop down area which I can then stick a shortcode for the search plugin in, similar to this mobile version?

    #1586225
    Leo
    Staff
    Customer Support

    You can change the width with this CSS:

    @media (min-width: 769px) {
        .inside-navigation div#ajaxsearchpro1_2 {
            width: 200px;
        }
    }

    it would help if the default search button could be removed too?

    It can be removed in the customizer:
    https://docs.generatepress.com/article/navigation-search/

    As for the mobile version, is there a way to have the search button once click show a drop down area which I can then stick a shortcode for the search plugin in, similar to this mobile version?

    Unfortunately that would require a custom solution that modifies the output of the plugin’s search form.

    #1586395
    William

    Thank you – is it possible to move the logo further to the left and the search closer to the logo too?

    #1586643
    Leo
    Staff
    Customer Support

    Try this CSS:

    .nav-align-right .inside-navigation {
        justify-content: flex-start;
    }
    .nav-align-right .navigation-branding {
        margin-right: 10px;
    }
    .nav-align-right .custom-search-form {
        margin-right: auto;
    }
    #1586902
    William

    That seems to do the job, thank you ๐Ÿ™‚

    #1587483
    Leo
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.