Archived topic
Search Bar Font and Position
5 replies · Started by troyw on January 24, 2022
Hey team,
I am doing a bit of a tidy up on a website i built last year and notice that the Custom Search Field is acting up a bit. If you click on the magnifier in the Navigation, you will see it opens up a nice Search box, but the font when you type in it is small and poorly positions. How can i get a bigger font which sits more central in the space?
Also, where can i style the search results page as it is pretty broken up and needs full black background and White title?
Thanks
Hi Troyw,
Could you try adding this custom CSS and see if it works? Kindly replace the font-size value(2rem) to the appropriate value you prefer.
.search-form.navigation-search > .search-field {
text-align: center;
font-size: 2rem;
}To add custom CSS, you’ll need to go to the Appearance>Customize>Additional CSS.
You may refer to this link for more assistance regarding this: https://docs.generatepress.com/article/adding-css/
As for you second inquiry, could you give us an idea or a mockup of what you want your “Search Results” page to look like so we can try to suggest the best fix that would change the background color and the page title color altogether with the other changes needed?
Thanks Fernando, that seems to have worked great.
As far as the Search Results page goes, I just need those white bits on the side gone and black like the rest of the page background. If you look at a page such as the url I have added below, you will see the navigation at the top. Is the Search Results page controllable through the elements?
Hi Troyw,
The “Search Results” page can indeed be controlled through Elements. You can try adding "Search Results" to the Display Rule Exclusion of the Block Element responsible for adding the "divider" placed after your navigation to make it similar to the link you provided. Excluding this Element would effectively remove the black bar covering your menu items.
Moreover, changes to colors could be easily done through Appearance>Customize>Colors. I believe you should change the background color of both the Header and the Content, and the H1 color of the Content.
If however, you only want to make sure these color changes would be made to the “Search Results” page,
body.search.search-results{
background-color: black;
}
body.search.search-results .page-title{
color: #fff;
}Hope this helps!
That's awesome Fernando, thanks.
You're welcome! Glad to be of assistance! Feel free to reach out if you'll need assistance with anything else and we'll be here to help! :)
