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

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.

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.

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

No problem 🙂