[Support request] Search Icon in Nav Menu background collour

Home Forums Support Search Icon in Nav Menu background collour

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #856979
    kv1953

    I have tried using below css as provided in the past by Tom but does not appear to work. The website is currently under development would prefer white box with black text and also include “enter search here” text in box or before. The sizing of the box code works but would prefer if possible for box to be right aligned.

    .navigation-search input[type=”search”],
    .navigation-search input[type=”search”]:active {
    color: #3f3f3f;
    background-color: #3f3f3f;
    }
    .navigation-search {
    max-width: 300px;
    }

    GeneratePress 2.2.2
    GP Premium 1.7.8
    #857421
    Tom
    Lead Developer
    Lead Developer

    To move it to the right, you can do this:

    .navigation-search.nav-search-active {
        left: auto;
    }

    To add the placeholder text, you can add this PHP:

    add_filter( 'generate_navigation_search_output', function() {
        return sprintf( // WPCS: XSS ok, sanitization ok.
            '<form method="get" class="search-form navigation-search" action="%1$s">
                <input type="search" placeholder="Enter search here" 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' )
        );
    } );

    Your color CSS looks good, but I’m not seeing it on the site. Where are you adding it?

    #857534
    kv1953

    Hi Tom, Thanks for quick response i have tried adding in “additional css” & simple css with no change although the width adjustment does work.

    #857702
    kv1953

    Regarding below is it the functions.php file that needs editing and if so should i install child theme?

    To add the placeholder text, you can add this PHP:

    add_filter( ‘generate_navigation_search_output’, function() {
    return sprintf( // WPCS: XSS ok, sanitization ok.
    ‘<form method=”get” class=”search-form navigation-search” action=”%1$s”>
    <input type=”search” placeholder=”Enter search here” 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’ )
    );
    } );

    #857732
    David
    Staff
    Customer Support

    Hi there,

    yes that belongs in your Child Theme Function file or you can use the Code Snippets plugin.

    https://docs.generatepress.com/article/adding-php/

    #857787
    kv1953

    Hi Dave,
    I used Code Snippet to add placeholder text but nothing showing up.

    add_filter( ‘generate_navigation_search_output’, function() {
    return sprintf( // WPCS: XSS ok, sanitization ok.
    ‘<form method=”get” class=”search-form navigation-search” action=”%1$s”>
    <input type=”search” placeholder=”Enter search here” 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’ )
    );
    } );

    Also Tom asked where i was putting below css code to change colour background I am using the Additional CSS in customizer but nothing happens, i want white background with blacks text. Also tried Simple CSS with no joy. Code for placing box to right & setting width both work.

    .navigation-search input[type=”search”],
    .navigation-search input[type=”search”]:active {
    color: #3f3f3f;
    background-color: #3f3f3f;
    }

    #857808
    David
    Staff
    Customer Support

    Try this CSS – adjust your colors accordingly:

    .navigation-search input[type="search"],
    .navigation-search input[type="search"]:active,
    .navigation-search input[type="search"]:focus {
        color: #222;
        background-color: #ffffff;
    }

    The placeholder is there, it’s just hard to see with the current background colors.

    #866850
    Neringa

    https://snag.gy/rnFqAp.jpg
    https://snag.gy/betqC6.jpg

    Hello,

    I am writing to you to aks about a problem and I send you some pictures of that.
    The problem is that users can’t see “Hamburger menu” and “Search” icons on their devices in the user mode. Me too.
    But then I edit my page I can see it.
    How I can risolve that?

    #866908
    David
    Staff
    Customer Support

    Hi there,

    view you’re webpage. Right Click > Inspect. Check the Console Tab within you will see a list of errors. Looks like the site was migrated to a live site and many of the Permalinks are now broken. Use a plugin like Better Search & Replace to fix them.

    If you need any more assistance than please raise a new Topic where we can assist.

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