[Resolved] Change color of the cross icon in search (Navigation menu)

[Engelbrecht]

Im trying to change the color of the cross/close icon in the search menu, but im really not sure i would copy in all the css that my inspector (chrome) shows me. How would i target only that cross since its white on a almost transparent white backgrond? I also want to remove the hovering effect of it, so it just stays the same color.

Is it also possible to add “Search here…” text (placeholder) into the search field?
I pasted this filter into the function page, but i cannot get it to work

add_filter( ‘generate_search_label’, ‘bba_search_label’ );
function bba_search_label()
{
return ‘Søg…’;
}

Last thing, can i add an sort of inner buttom-border line, like in black so its more visible where to search?

[Leo]

Hi there,

For the close icon, try this CSS:

li.search-item.close-search a:before, span.search-item.close-search a:before {
    color: #000;
}

For placeholder, see the second example here:
https://docs.generatepress.com/article/generate_navigation_search_output/#usage

For the border, try this CSS:

.navigation-search, .navigation-search input {
    border-bottom: 1px solid #000;
}

[Engelbrecht]

Thank you again leo!

The color thing and filter worked like a charm and the buttom-border worked as well though it was not like i wanted to. Maybe its not possible, but is it possible to create it just below the text, but not at the outer border?

[Tom]

Hi there,

Just to confirm, you want the border directly below the text inside your search area? Any examples we can look at?

[Engelbrecht]

Something like this https://alis.vamtam.com/about-us/ (only viewed on mobile for now)

[Tom]

That site is using the same method as Leo mentioned above.

I think applying the border to the actual input element is our only choice. We can make it so the input isn’t as tall as the navigation if you’d like?

[Engelbrecht]

That is also what i thought. I realised that i may need your help on more important things later on so lets wait with this one for now.

And one last thing, i want to thank you and your team for all the help so far, i really appriciate it. Its exceptionel and its more than i would have expected! I defently recommend GP both as a product but also the great support you give on the forum! Keep it up

[Tom]

That’s great to hear! Thank you! 🙂

[Author]

Posts