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.

Hello Fernando,

thank you reply me.

please see this website:https://oled.baynoe.com/

please help me about custom css.

thanks.

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

hello Fernando,

i already do it like this https://share.getcloudapp.com/9Zuzr496

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

yes.

thanks.

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.

thanks,ok now.

Glad to hear that