Search label

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:

https://wordpress.org/plugins/code-snippets/

I am using a child theme yes. But the code is not working.

Hi Holly,

I just tested the code, it is working well.

So you've added this code to your child theme'sfunctions.php file?

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/eJjSefJEFe

It'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.

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 1024 with your preferred breakpoint. I think yours is set to go on tablet view at 1107px.

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. :)