[Support request] Custom Search Bar

[Abdul Khaliq]

Is there any way to generate a custom search bar with the search icon only in the header? After clicking the search icon, search bar appears below header. Just like this website: https://allaboutpins.com/

[Ying]

Hi there,

1. Add this PHP code so we can move out the search bar from the navigation area to the after header area:

add_action('wp', function() {
	remove_action( 'generate_inside_navigation', 'generate_navigation_search',10 );
add_action( 'generate_after_header', 'generate_navigation_search' );
});

Adding PHP: https://docs.generatepress.com/article/adding-php/

2. Add this CSS code, feel free to remove or change the background-color from the code:

.navigation-search.nav-search-active {
    position: relative;
    background-color: red;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Abdul Khaliq]

Is it possible to build up the complete header in GeneratePress same as the mentioned site?

[Ying]

Yes, it’s possible.

[Abdul Khaliq]

How, can you please tell me about the procedure or any plugin to do this?

[Ying]

You can build the orange top bar using either topbar widgets at appearance > widgets, or a block element – hook, choose before_header as hook name.

Here’s a demo video for the method using block element – hook: https://youtube.com/watch?v=1VQECQxeyQE&si=EnSIkaIECMiOmarE

Go to customizer > layout > primary navigation, set the navigation location to float right.

You can add the Get free design button using a block element – hook, choose menu_bar_item as the hook name.

[Author]

Posts