[Resolved] how to custom search function in menu navigation

Hi Bruce,

Yes, you can have something like that. You can use a Block Element – Hook, add a WordPress Search Block, and hook the Element to somewhere like menu_bar_items.

Reference: https://docs.generatepress.com/article/block-element-hook/
Search Block Reference: https://wordpress.org/support/article/search-block/

After you’ve added it, we can help you with the custom CSS to make it look as you would prefer.

To clarify, do you want it to look like the one in the image you sent?

If so, can you set the Button of the Search Block to appear inside first? Example: https://share.getcloudapp.com/9Zuzr496

You can also turn off the label if you prefer: https://share.getcloudapp.com/eDunAeZX

Hi there,

try this CSS:

.menu-bar-items .wp-block-search__inside-wrapper {
    background-color: var(--base);
}
.menu-bar-items .wp-block-search__inside-wrapper input {
    background: transparent;
    border: 0;
}
.menu-bar-items .wp-block-search__inside-wrapper button {
    padding: 0 10px;
    background-color: var(--contrast);
    color: var(--global-color-8);
}

And you can remove the Label in the block editor.

Glad to hear that