Navigation bar search: Adding content to the magnified glass

Hi there,

it requires a little PHP snippet provided here:

https://docs.generatepress.com/article/generate_navigation_search_output/#add-a-placeholder

Thank you

I added the following into the snippet plugin.
Two issues: I wanted to add the copy next to the magnifying glass on the menu bar before clicking on it, and the words "Enter your search" once you click on the magnifying glass are cut in half. Too high.
Jan

add_filter( 'generate_navigation_search_output', function() {
printf(
'<form method="get" class="search-form navigation-search" action="%1$s">
<input type="search" placeholder="Enter your search" class="search-field" value="%2$s" name="s" title="%3$s" />
</form>',
esc_url( home_url( '/' ) ),
esc_attr( get_search_query() ),
esc_attr_x( 'Search', 'label', 'generatepress' )
);
} );

So try this CSS to fix the placeholder text being cut off:

input::placeholder {
    line-height: 1;
color: #000000;
}

Then this CSS to add some content before the search icon:

.main-navigation li.search-item {
	display: inline-flex !important;
    align-items: center;
}
.main-navigation li.search-item:before {
    content: 'Search';
    margin-right: 10px;

}

Thank you almost there.
No matter how small I make the width between the menu and there is plenty of space, the search is always on the second line.

Oops my bad - just correct the second CSS rule here

David Thank You Again. It worked.
As I fix one thing I see something else sorry.

When the magnifying glass is clicked on the words Enter your search fit (Yes!)
Where do I find the color for this section? I looked under navigation but didn't' see anything that would change the font color. The font color isn't readable.

Thank you again!
Jan

Great to hear that.
Changing the colours of the navigation requires some CSS. This topic covers that:

https://generatepress.com/forums/topic/change-text-color-at-search-box/#post-884044

This changed the text box, but not the font.
I was able to change the box to several different colors but not the font itself.
Thanks

To clarify the above.
The color of the font that I type in to search is fine.
Its the color of the words Enter your search from the clicking on the magnifying glass that isn't changing color. Thank you

That CSS will change the color of the search text. If you want to change the placeholder text then I have edited the CSS here:

https://generatepress.com/forums/topic/navigation-bar-search-adding-content-to-the-magnified-glass/#post-936028

David,
Thank you and I apologize.
I was not thinking that one was the pace holder and one was the navigation.

Thank you for all your help!

Support is why I love GP - Well and the great GP system
Jan

No apologies necessary - glad to be of help.