- This topic has 9 replies, 2 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
Hi,
I’ve tried using the solutions given on this forum to reduce the search box and align it to the right, but the given CSS didn’t work for me.
Can you help out?
Screenshot attached.
Thanks!
Customer Support
Hi there,
try adding this CSS:
nav .navigation-search.nav-search-active { max-width: 400px; left: unset; }Thanks, David!
Just one more thing:
1) how can I add border color and radius?
2) Is there any chance to add a prefilled text into the search box?
Thanks!
Colors can be set in the Customizer > Colors.
But as you’re going to need some CSS for the other styles you can do it all there.Quick question, apart from adding the placeholder text, any other changes eg. a submit button. As the former will require some PHP so its easier to handle it all in one go 🙂
Hey David,
1) Customizer > Colors. I could only find background and text color options for the search box there. So would be great to know the CSS for the borders.
2) Nope, no submit button is needed, just the placeholder text.
Thanks, David!
1. Replace my other CSS with:
nav.main-navigation .navigation-search { max-width: 400px; left: unset; right: -10px !important; margin-top: auto; border-radius: 100px; border: 3px solid #000; height: 50px; top: 5px; overflow: hidden; } nav .navigation-search input[type="search"] { height: 45px; padding: 2px 20px; } .main-navigation .menu-bar-item.close-search a { background-color: transparent !important; }2. For the placeholder text you need this PHP Snippet:
add_filter( 'generate_search_placeholder', function() { return 'Search'; } );Thanks, Dave!
1) Done!
2) Paste the snippet (I use the code snippets plugin) but no text comes up in the search box. Image attached.
Sorry my bad – you need this snippet:
https://docs.generatepress.com/article/generate_navigation_search_output/#add-a-placeholder
Awesome! Thanks Dave!
You’re welcome!
- You must be logged in to reply to this topic.
