Adding a search bar over an image

blackboxbbq
Visitor
3 0 1

Hello, 

 

I'm trying to add a search bar over an image- header image- to create a 'Help Page' Template. 

 

I'm Using Expanse theme- and have found the code for the search bar, but cant seem to get it to sit over an image in the custom content section

 

Which appears to be: 

 

<predictive-search data-context="header" data-enabled="true" data-dark="false">
<div class="predictive__screen" data-screen=""></div>
<form action="/search" method="get" role="search">
<label for="Search" class="hidden-label">Search</label>
<div class="search__input-wrap">
<input class="search__input" id="Search" type="search" name="q" value="" role="combobox" aria-expanded="false" aria-owns="predictive-search-results" aria-controls="predictive-search-results" aria-haspopup="listbox" aria-autocomplete="list" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false" placeholder="Ask a Question..." tabindex="0">
<input name="options[prefix]" type="hidden" value="last">
<button class="btn--search" type="submit">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 64 64"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:2px}</style></defs><path class="cls-1" d="M47.16 28.58A18.58 18.58 0 1 1 28.58 10a18.58 18.58 0 0 1 18.58 18.58zM54 54L41.94 42"></path></svg>
<span class="icon__fallback-text">Search</span>
</button>
</div>

<button class="btn--close-search">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 64 64"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:2px}</style></defs><path class="cls-1" d="M19 17.61l27.12 27.13m0-27.13L19 44.74"></path></svg>
</button>
<div id="predictive-search" class="search__results" tabindex="-1"></div>
</form>
</predictive-search>

 

but i cant for the life of me get it to sit over an image- 

I got close but the search box didn't 'work' 

 

Has anyone got some simple code to make this happen? 

 

Basically i want a full width image, with text overlayed Saying How Can we help? 

Use the search bar below.. 

 

thanks

 

George 

 

 

Replies 2 (2)

justwhistle922
Visitor
1 0 0

Hi. I have the same problem. I haven't found a solution yet unfortunately 😕

BSS-Commerce
Shopify Expert
3477 461 515

Hi @blackboxbbq ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development