How can I add a permanently visible search bar to my Debut theme website?

Store Design
1

Hi

I’m wanting to add a search bar to our website instead of just having a magnifying glass. We use the Debut theme.

Our website is: https://travellingman.com/

Is it possible to get some help with this?

Thanks in advance for any help

Aaron

2

How did you add the permanent search to your site?

If you do the following it looks better, in my opinion.

Add the following (in bold) to your theme.scss line 4350.

.search-bar__input {
border: 1px solid transparent;
width: 100%;

and… line 4297

.search-bar__form {
margin: 0 auto;
width: 50%;
position: relative;
height: 2.875em;
border: 1px solid black;
flex-wrap: nowrap;

and… 4306

@media only screen and (max-width: 749px)
.search-bar__form {
width: 90%;

Play around with the percentage to suit your liking.

If someone else can assist in helping with keeping the shape of the search bar when zooming in and out. It’s beyond my knowledge.