Search Button Customization

Hi there,

We may have to change how it's relatively bound to.

Try adding this CSS:

form.search-form.navigation-search, form.search-form.navigation-search * {
    height: 100%;
}

header.site-header form.search-form.navigation-search {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
}

header.site-header .inside-navigation.grid-container {
    position: unset;
}

header.site-header {
    position: relative;
}

its looking like this now ?? (snapshot attached)

No placeholder text, no search button to click, no pointer etc??

how a user will understand?

you just get a long white bar only with a cross to close...

You have 2 forms on your site.

You should remove the other one and fix the original one to have a placeholder.
https://share.getcloudapp.com/d5uAN02v

Are you using a filter for this? perhaps there's an issue w/ the snippet you're using.

You have 2 forms on your site. ??

how to delete, I just installed the dev theme and customized it through some blocks, that's it, i am not aware about 2nd one...it could be because of the dev theme, one is in the search bar and another is on the body (refer snapshot)...

Are you using a filter for this?

I am not sure, where should I check it??

I have given my credential so that you can check it and let me know how should I delete it...

HI,

Using the one filter given in your docs-

https://docs.generatepress.com/article/generate_navigation_search_output/#add-a-placeholder

the filter is below -

add_filter( 'generate_navigation_search_output', function() {
printf( // WPCS: XSS ok, sanitization ok.
'<form method="get" class="search-form navigation-search" action="%1$s"> <input type="search" class="search-field" value="" name="s" title="%2$s" /> </form>',
esc_url( home_url( '/' ) ),
esc_attr_x( 'Search', 'label', 'generatepress' ) );
} );

I'm unable to use the credentials provided as the usual login link doesn't seem to be working.

Can you try modifying the PHP snippet to this?

add_filter( 'generate_navigation_search_output', function($output) {
    $output = sprintf(
        '<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' ) 
    ); 
	
	return $output;
},20 ,1 );

Yes login url has changed... use this one

You have 2 snippets here - https://share.getcloudapp.com/p9uA6d0A

Remove the 2nd one.

Note: It's against our support policy to do any changes to any user's site as it causes potential liability. We can only suggest what to do. :D

As per support tutorial that 2nd one is for clearing the search field after search is completed..

Placeholder is visible when modified first one..only problem is not getting any button or icon to click for search...

And want to add a cursor blink before Placeholder and small padding from left in Placeholder like(www.seventhqueen.com)...

We can just merge the 2 snippets into one.

Try adding this instead of the 2 filters you have.

add_filter( 'generate_navigation_search_output', function($output) {
    $output = sprintf(
        '<form method="get" class="search-form navigation-search" action="%1$s">
            <input type="search" placeholder="Enter your search" class="search-field" value="" name="s" title="%2$s" />
        </form>',
        esc_url( home_url( '/' ) ),
        esc_attr_x( 'Search', 'label', 'generatepress' ) 
    ); 
	return $output;
},20 ,1 );

We then go with CSS for the other styling related things you want to add on it.

done

You then change this:

header.site-header {
    position: relative;
}

to this:

header.site-header > .inside-header {
    position: relative;
}

No, its destroyed multiple things....only changed small padding to left...all shifted to left.

refer the first snapshot...

and even rolled back to the previous CSS then too that small gap is visible ...refer 2nd snap..(this might be cache plugins which i disabled now till issue going on).

Also, this don't add any search button icon and cursor etc...

Strange,

It looks fine on the test here (for static mode) - https://share.getcloudapp.com/wbu6zNdy

For the 1st photo:

Change this CSS:

header.site-header form.search-form.navigation-search {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
}

to this

header.site-header form.search-form.navigation-search {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

For the 2nd photo:

That's coming from something else, it's this css:

.grid-container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

It's the padding right. It's coming from the Gutenberg plugin.

I believe you don't have to install this anymore. WordPress is already using Gutenberg by default.