[Resolved] Can the Submit Button on a Custom Search be made sticky

[Author]

Posts

[CaseyK4294]

Tell us what you are trying to do?
My custom search will have a long list of search criteria to choose from. I want to know if I can make the submit button sticky so that it always appears on the bottom page for the user while scrolling down the search criteria options.

Is there any documentation that you are following?
No

What is the link to your site?
hidden link

[Nigel]

You'll need to add a little CSS to achieve something like this.

I suggest you might try adding columns to the search filter section and put the submit button in one column and the search filters in another column.

Add a custom class to your submit button (e.g. "sticky").

Then add custom CSS that targets that class selector.

The easiest way to add a little custom CSS in a scenario like this is to add a custom HTML block below your button and then add the CSS like so:

<style type="text/css">
.sticky {
position: sticky;
top: 40px;
}
</style>

You'll probably want to tweak the top setting according to your theme and the size of your header, etc.

[CaseyK4294]

Thank you, I will try this!

[Nigel]

OK, let me know if you get stuck.

[CaseyK4294]

Hi Nigel,

Yes, I could still use some help please. I tried the method you wrote above and no results. I created a new search in a grid with three columns, the left empty for spacing, the center has the search criteria and the right one has the search button and the reset search button.

I would like to confirm that the search button settings in the block editor, under advanced, is where I enter the "sticky" CSS label for the search button block, in the ID field. Should it have quotations or no quotations? I tried it both ways and no result.

Thank you for your assistance.

[Minesh]

Nigel is on Vacation. This is Minesh here and I'll take care of this ticket. Hope this is OK.

Once you add the ID as sticky (without quotes), can you please press the enter key and then save the page/post.

I hope you already added the custom CSS that Nigel shared.

[CaseyK4294]

Hi Minesh,

The ID is set to sticky (without quote), and I did press the enter key and then saved/updated the page. The CSS that Nigel shared with me had already been added in a custom HTML block directly below the button block, as it appears in my previous screenshot. It is not working at all.

Here is the link to the new page this is on:
hidden link

Please advise...

One additional question related to this search that has come up, is can we also set it so that once the user presses the search button, the page automatically scrolls to the section where the results are instead of the the top of the page?

Thanks for your assistance.

[Minesh]

We entertain only one question per ticket. This will help other users searching on the forum as well as help us to write correct problem resolution summery. Lets resolve issues one by one.

I see the page you shared and I can see in middle column you have added the search filters and we have to scroll a lot to reach to the search button.

What if we create a three column grid and to each column we add one search filter so in one row we will have three filters? If you want I can show you by moving the search filers but for that I will require access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[CaseyK4294]

I understand about the one question per ticket, and will work to get this one resolved first. Thanks.

I do know that the list of search filters is long, but the owner of the site does not want them separated into three columns in a grid, he wants it long in one column, with a floating search button that always appears to the right of the search filters. It is actually already set up in a three column grid. The left column is empty, the center column has the long list of search filters, and the right column has the search/submit button. I don't want to move any search filters, only get the search button to float so it is always visible to the right of the search filters.

[Minesh]

I got it, there is no such feature available but if you can share access details I will try to add some CSS and see if I can be helpful to you that should allow you to fix this issue, if no, you will require to contact CSS experts on this.

But first let me try and see.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

I've changed the CSS code you added as given under:

<style type="text/css">
#sticky {
position: fixed;
top: 200px;
}
</style>

Can you please confirm the button you see is as per your requirement.

[CaseyK4294]

Hi Minesh,

On my end when I visit the page I am still seeing the button at the bottom of the page instead of as a sticky/floating button.

[Minesh]

Can you please remove browser cache.

I can see the search button at top right as you can see with the following screenshot:
=> hidden link

[CaseyK4294]

I see it floating now. Thank you for your help! This issue is now resolved.

[CaseyK4294]

I realize I had one more question that has to do with this specific issue. Is there a way to stop the button from being fixed/sticky after a certain point in scrolling, once we reach the end of the search criteria?