- This topic has 13 replies, 4 voices, and was last updated 1 year, 12 months ago by
.
-
Posts
-
Hi. I used this code found here: https://generatepress.com/forums/topic/how-to-add-a-label-to-the-navigation-search-form/#post-1402625 to add a search label for accessibility. I added it in the theme function php file and it saved without error. But it did not add a label.
My site is https://fresheggs.biz/
What am I missing?Thanks!
Customer Support
Hi there,
are you using a Child Theme ?
If you’re not, can you remove the code and add it to your site using the Code Snippets plugin:I am using a child theme yes. But the code is not working.
Customer Support
Hi Holly,
I just tested the code, it is working well.
So you’ve added this code to your child theme’s
functions.phpfile?Can you try remove it and use the code snippet plugin to eliminate PHP error in your theme file?
And if you are using any cache plugins, try disable them.
Yes, the code is in the child theme’s functions.php file.
I am not getting a PHP error in my theme file. The code just isn’t working (adding the label).
I disabled the caching plugin but the code still isn’t working.The code should work.
There might be some kind of conflicts with your other PHP code.
Can you switch to parent theme and using code snippet plugin to test?
I switched to the parent theme and used the code snippets plugin. It still isn’t working.
The label has been added to your site:
https://www.screencast.com/t/eJjSefJEFeIt’s using the body text color which is hard to see.
Ah! Thank you. How do I change the color? Shouldn’t it be seen when it’s not open – next to the magnifying glass?
Add this CSS to change the color of the label:
label[for*="nav-search"] { color: #fff; }It appears above the Search Form. Do you also wat some text beside the Search Icon ?
Yes. Text beside the icon I have mainly been trying to accomplish for accessibility. Thanks.
Customer Support
Hi Holly,
To add a label to the Search Icon, you may try adding this CSS in Appearance > Customize > Additonal CSS:
.main-navigation .search-item a:before { content: 'Search: '; display: inline; }On Desktop view though, the Search Icon wraps down because there isn’t enough space. You’ll need to reduct the menu item spacing or font size. Or, you can just apply it to tablet and mobile view with this code instead:
@media (max-width: 1024px) { /* CSS in here for tablet only */ .main-navigation .search-item a:before { content: 'Search: '; display: inline; } }Kindly replace
1024with your preferred breakpoint. I think yours is set to go on tablet view at1107px.Hope this helps! 🙂
Thank you!
You’re welcome Holly! Glad to be of assistance! Feel free to reach out anytime you’ll need assistance with anything else. 🙂
- You must be logged in to reply to this topic.