How to add search icon on custom Navigation created using Block Elements?

Hi there,

see this topic, which provides a PHP Snippet to create a shortcode you can use:

https://generatepress.com/forums/topic/trying-to-insert-navigation-search-in-top-bar-instead-of-in-navigation/#post-2552514

`function generate_navigation_search_shortcode() {
// start object buffer
ob_start();
// Call the theme's built-in function
$navigaion_button = generate_do_navigation_search_button();
$search_form = generate_navigation_search();
$output = $navigaion_button .$search_form;
echo $output;
// return buffer
return ob_get_clean();
}
add_shortcode( 'gp_navigation_search', 'generate_navigation_search_shortcode' );

I have added this code using the WPCode plugin which I use to add PHPSnippets. Then too the shortcode they provided me and pasted on the navigation bar but it is not working.

Don't use the Shortcode the plugin provided, as that function creates the shortcode gp_navigation_search for you.

I have used the shortcode you suggested but it is still not working, https://prnt.sc/ZkqjjNmB9UB8

I have added the shortcode at the right side of navigation bar I created, check this https://prnt.sc/7BUIhRwXuEg7 and this is how I added the code through WPCode plugin https://prnt.sc/I8KNO9lFCZkp

Shortcode needs to be wrapped in the [], try use [gp_navigation_search].

Ops, I completely forgot about this. It worked but it is not working like how a search bar should work. There is no input field is showing. Can you share some CSS to fix this and customize it?

I have shared a site link in the private field, can you share some CSS to make our search similar to this?

Can you provide your site link?

I have provided the site link in private field.

Do you need this search button inside the input area?
https://www.screencast.com/t/4BVUerixVC

I just need the search icon visible first, when a user clicks on that it should show like this.

Hi Ravi,

It's already visible: https://share.getcloudapp.com/GGu7kGvn

Did you mean to attach an image when you say: "it should show like this."?

Can you re-send it?

It is visible only, not working like how a search option should work.

Can we add some animation when a user clicks on the search icon to search?

Can this become similar to the example site I shared?

That sort of Search bar would require custom code that's out of our scope.

I would suggest using a plugin instead or hiring a developer.

One simple CSS design would be this:

form.search-form.navigation-search.nav-search-active {
    width:  300px;
    position: absolute;
    right:  -10px;
    left: unset;
    top:  50%;
    transform: translateY(-50%);
    
}

.gb-container.gb-container-2e076eca {
    position: relative;
    width: fit-content;
}

span.menu-bar-item.search-item.active.close-search {
    position:relative;
    z-index: 10000;
}

form.search-form.navigation-search.nav-search-active input{
    height: 30px;
    color: #000;
    border-radius: 16px;
}

It is good now, thanks for the code!

But in the mobile view, it is covering the logo also when clicked on the search icon.