Custom Search Bar

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/

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

Yes, it's possible.

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

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.