Most StudioPress child themes include CSS code which hides the submit button for the Genesis search widget.
In this tutorial, i’ll show you which code you need to remove to display the search forms button.
I’ll also give you 3 sets of code which help you style your search box, submit button and other elements associated with your search form.
Important : All CSS code includes the .nav-primary class as the code has been tested using the primary nav menu extras which displays a search form in the primary nav menu. Remove or replace the .nav-primary class selector for use outside the primary nav menu.
Remove CSS Which Hides Button
The first step is to remove the CSS code which hides the search forms button.
In your child themes style.css file, look for this code and remove it:
.search-form input[type="submit"] {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
width: 1px;
}Once you’ve removed the code above, your button will appear somewhere near your search box.
Display Button Inline With Box
Now you might want to bring the button inline with the search form which you can do simply by adding CSS code to your child themes style.css file:
And here’s the result:
You could also replace the button with an magnifying glass.
Replace Search Button With Icon
Note: You will need to add PHP code to your functions file to enqueue dashicons for use on the front end.
This code replaces the search button with a magnifying glass.
To do this we need to filter the search button text and replace it with a dashicon. Here’s the PHP code which goes in your child themes function file and the CSS for your style sheet.
And here’s the result:
Add Icon Inside Search Input Field
This PHP and CSS code enables you to add the search icon inside the search forms input field.
And here’s the result:
Thanks so much for the tutorial! It was so helpful.
-Charlotte
HI Brad,
I am try to do the REPLACE SEARCH BUTTON WITH ICON in the side bar but it is leaving the submit text in and not adding the icon
Hello Alistair
Yes i didn’t include the solution for that in this post as i haven’t worked it out yet so the post only covers whats there at the moment.
Will update the post at some stage when i work out how to do that.