Add search box on primary navigation

Hi there,

use a GP Block Element:

https://docs.generatepress.com/article/block-element-hook/

1. go to Appearance > Elements -> Add New –> Block.
2. in the element settings sidebar set the Hook to menu_bar_items
3. set the Display Rules Location to Entire Site
4. in the block editor add a Search block.

Glad to hear that

Try this CSS:

.wp-block-search__inside-wrapper :is(input, button) {
    padding: 8px 8px;
    margin-inline: 0;
}
.wp-block-search__inside-wrapper {
    padding: 0;
    margin-block: 8px;
}

And optionally this CSS will make the search bar fill its own row below the hamburger menu on smaller devices:

@media(max-width: 420px) {
    .menu-bar-items,
    .wp-block-search {
        flex: 1 0 100%;
    }
}

Glad to hear that!