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

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

Home Forums Support Change color of the cross icon in search (Navigation menu)

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #633174
    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?

    GP Premium 1.6.2
    #633416
    Leo
    Staff
    Customer Support

    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;
    }
    #633503
    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?

    #633705
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    #636238
    Engelbrecht

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

    #636586
    Tom
    Lead Developer
    Lead Developer

    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?

    #636640
    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

    #637113
    Tom
    Lead Developer
    Lead Developer

    That’s great to hear! Thank you! 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.