[Support request] How to add search icon on custom Navigation created using Block Elements?

[Ravi Dixit]

I am trying to add a search icon on the right side of the site header I created using Block Elements, but the WordPress search block allows me to add the entire search box which is not required in my case https://prnt.sc/xslMqgU9aKEe. I just want to have a small search icon.

How can I add it? Shared the site link in private information field.

[David]

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

[Ravi Dixit]

`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.

[David]

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

[Ravi Dixit]

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

[Ying]

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

[Ravi Dixit]

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?

[Ying]

Can you provide your site link?

[Ravi Dixit]

I have provided the site link in private field.

[Ying]

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

[Ravi Dixit]

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

[Fernando]

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?

[Ravi Dixit]

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?

[Fernando]

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;
}

[Ravi Dixit]

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.

[Author]

Posts