[Resolved] Navigation bar search: Adding content to the magnified glass

[Janet Davis]

Hello and thank you!

I have navigation search enabled on the man navigation.
I would like to add some copy: Such as search our site next to the magnifying glass.
Is there a way I can do this?

Thank you
Jan

[David]

Hi there,

it requires a little PHP snippet provided here:

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

[Janet Davis]

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’ )
);
} );

[David]

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;

}

[Janet Davis]

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.

[David]

Oops my bad – just correct the second CSS rule here

[Janet Davis]

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

[David]

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

[Janet Davis]

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

[Janet Davis]

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

[David]

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

[Janet Davis]

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

[David]

No apologies necessary – glad to be of help.

[Author]

Posts