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

Home Forums Support Navigation bar search: Adding content to the magnified glass

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

    #935911
    David
    Staff
    Customer Support
    #936010
    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’ )
    );
    } );

    #936028
    David
    Staff
    Customer Support

    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;
    
    }
    #936048
    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.

    #936055
    David
    Staff
    Customer Support

    Oops my bad – just correct the second CSS rule here

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

    #936329
    David
    Staff
    Customer Support

    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

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

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

    #936343
    David
    Staff
    Customer Support

    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

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

    #936378
    David
    Staff
    Customer Support

    No apologies necessary – glad to be of help.

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