[Support request] Search Icon in Nav Menu background collour

[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

[Tom]

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?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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.

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

[David]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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;
}

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts