Tagged: bar, CSS, custom, customization, design, Instant search, search
Hi,
Can you explain what do we have to do to have a search bar like on the enfold doc please?
Here is a link: https://kriesi.at/documentation/enfold/
I can add a search bar to any page with the widget element but I do not know how to customize it neither how to make the instant search working.
Thanks,
Demaup
Hey Demaup,
The styling will have to be done via css coding.
Best regards,
Jordan Shannon
I Jordan,
Thanks for your answer. Got that, but the question was more which attributes for the bar and the button (for example .searchbar) CSS do I have to use to custom the Search Bar?
Cheers,
Demaup
Hi,
Do you have a link to your site and current search bar? This way we can see your exact classes and ids.
Best regards,
Jordan Shannon
Hi,
Sorry for the late answer.
Here is the link: https://auto-boulot.fr/base-connaissances/
Cheers,
Demaup
Hi Demaup,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
#top #searchsubmit {
min-width: 110px;
}
#top #s {
border-radius: 20px;
border: 2px #32a05c solid;
font-size: 15px;
padding: 11px 47px 11px 20px;
}
If you need further assistance please let us know.
Best regards,
Victoria
Hi Victoria,
Thanks, works like a charm.
Any guess on how to make the instant search working as on the enfold documentation page?
Example: https://imgur.com/a/hhJ9Dvr
Last question: how can I custom the texte (“search” by default) inside the bar?
Cheers,
Demaup
Hi,
Please refer to the following:
Best regards,
Jordan Shannon
Hi Jordan,
Thanks for the reply I will look closer.
Cheers,
Demaup
Hi,
No problem at all. Please let us know if they solve your issues.
Best regards,
Jordan Shannon