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.

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?

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.

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

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

That seems to do the job, thank you :)

No problem :)