Hi, I would like to edit the search bar on the top navigation menu, how would I be able to change the font/color on the default text? Also the background colors? I've attached a screenshot of what I mean. Thanks
1/ You can change the text via Customize > Quick Text Translation.
2/ The font for this search box will follow the font you've selected via Customize > General > Typography > Font for Body Text.
If you want to change to another font, can you show me the URL of that font on Google Fonts? I will help you with some custom code.
3/ You can change text color for the text "Type and hit enter" via Customize > Logo & Header > Colors > "Search, Shopping Cart & Mobile Bars Icons Color" - the text will be followed the color you've changed there.
4/ You can change background color when search open by add more this code to Customize > Custom CSS:
Thanks, your recommendations worked great for #1, 3 and 4. For the different font for #2, here's a link below to the Roboto font I'm thinking. Also, is there a way to have the search box rounded? Attached are some screenshots. Thanks!
Hi, I would like to edit the search bar on the top navigation menu, how would I be able to change the font/color on the default text? Also the background colors? I've attached a screenshot of what I mean. Thanks
Hi,
1/ You can change the text via Customize > Quick Text Translation.
2/ The font for this search box will follow the font you've selected via Customize > General > Typography > Font for Body Text.
If you want to change to another font, can you show me the URL of that font on Google Fonts? I will help you with some custom code.
3/ You can change text color for the text "Type and hit enter" via Customize > Logo & Header > Colors > "Search, Shopping Cart & Mobile Bars Icons Color" - the text will be followed the color you've changed there.
4/ You can change background color when search open by add more this code to Customize > Custom CSS:
.show-search #searchform input.search-input{ padding-left: 20px !important; background: #ffcccc; } .show-search a.close-search{ right: 10px; }Change color code ffcccc on the above code to color code as you want.
Best Regards,
PenciDesign
Thanks, your recommendations worked great for #1, 3 and 4. For the different font for #2, here's a link below to the Roboto font I'm thinking. Also, is there a way to have the search box rounded? Attached are some screenshots. Thanks!
https://fonts.google.com/specimen/Roboto?sidebar.open=true&selection.family=Roboto
Hi,
2/ Ok, please do follow steps below to do that:
a) Add more this code to Customize > Logo & Header > General > Add Custom Code Inside <head> Tag:
b) Add more this code to Customize > Custom CSS:
.show-search #searchform input.search-input{ font-family: 'Roboto', sans-serif; font-weight: 400; }4/ Unfortunately, currently this theme doesn't support this style.
We will consider to add more this feature in the future updates.
Best Regards,
PenciDesign
Thanks that worked great.