[Resolved] how to custom search function in menu navigation

[bruce]

hello

please see the pic:https://prnt.sc/OWsW8f5kZQH-

the default search function in custom only has on or off .

can custom it like pic ?

thanks.

[Fernando]

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.

[bruce]

Hello Fernando,

thank you reply me.

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

please help me about custom css.

thanks.

[Fernando]

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

[bruce]

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.

[David]

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.

[bruce]

thanks,ok now.

[David]

Glad to hear that

[Author]

Posts