-
techbackend04
Hi,
I have my search icon on the right corner of the header. When we click on the search icon, I want a small box expanding on its left to enter the text.
sample below
https://imgur.com/irErpi1Thanks,
-
Hi there,
You might want to use the legacy navigation search of GP in this case.
1. go to customizer > layout > primary navigation, disablenavigation search modal
.2. add this PHP and activate it:
add_filter( 'option_generate_settings', function( $settings ) { $settings['nav_search'] = 'enable'; return $settings; } );
Adding PHP: https://docs.generatepress.com/article/adding-php/
3. go to customizer > layout > primary navigation, and enable
navigation search
.once it’s done, you will need some CSS to style the search field, let me know!
-
techbackend04
Appreciate your prompt response.
It works. Is it possible to provide me CSS style code to reduce the search box, round the corners, and change background and text colour.Thanks a lot.
-
The CSS would need to be customized depending on the site’s nav layout, can you link us to your site?
Let me know 🙂
-
techbackend04
Hello,
Below is the site.
Thanks,
-
Try this CSS:
.navigation-search input[type="search"] { max-width: 50%; border-radius: 20px; background-color: #fff; border: 1px solid pink; opacity: 1; } .navigation-search.nav-search-active { text-align: right; } .navigation-search :is(input[type="search"], input[type="search"]:active, input[type="search"]:focus) { color: #000; }
-
techbackend04
Hello Ying,
Awesome. It works. If you don’t mind can you please add the text colour as black.
Thanks,
-
I added the CSS here: https://generate.support/topic/search-icon-expansion-in-header-itself/#post-104103
-
techbackend04
Thank you so much. You are awesome. Good luck.
-
You are welcome 🙂
- You must be logged in to reply to this topic.