Adding InstantSearch.js to nav bar

This seems like a relatively easy question, but I am sort of confused on how to implement this. I would like to put a instantsearc.js search bar in my navigation bar. How would I do that? Would I have to enter in some special stuff in css under #nav bar or #header? Any help is appreciated!

Hi @americantennisfedera, thanks for asking your question.

In your HTML markup, you will want to put the <input> element for the search box inside of your navigation header. You will only need CSS to style if you want to change how it looks.

Here’s a basic example:

<div id="navigation">
  <input type="text" id="search-box" />
</div>

Then in your JavaScript, make sure to target the search box by its id:

search.addWidget(
  instantsearch.widgets.searchBox({
    container: '#search-box',
    placeholder: 'Search...'
  })
);

How would I link this particular search widget to my index?

When you configure the instantsearch object you will pass in your specific app ID and search API Key. See the Example tab in the Initialization Documentation to see how this works:

var search = instantsearch({
  appId: '$appId',
  apiKey: '$apiKey',
  indexName: '$indexName',
  urlSync: true
});

Sorry this is a stupid question, but this is the last part I need, I believe, in order to make this work. Could someone please show me some CSS that one could use to style it. I’m having a brain fart right now, any help is appreciated!

Hi @americantennisfedera. We all have brain farts from time to time :slight_smile:

When I run into CSS issues I usually go find a site that I think looks good and look at the CSS they’re using. If you look in the Projects category you might find some inspiration from others.

Alternatively, I’d look at how popular frameworks like Bootstrap are doing it.