Wise Searchbar

To create the searchbar module

These instructions are to create one Searchbar module. You may need to create two modules due to the differences between Bootstrap 3 and Bootstrap 5. For now, let's just get one set up so we can get to the catalog. The catalog might also look terrible. Don't worry, we'll get there in the Bootstrap section.

1. Go to Extensions > Modules > New from the Top Toolbar (or click on 'Modules +' from the Home Dashboard).
2. Select 'Wise Searchbar'.
3. Enter a title that makes sense to you and for Show select 'No'.
4. Enter a module Position.
5. In the Menu Assignment tab, display on all pages or the selected pages of your choice.
6. Click 'Save' on the Top Toolbar.
   
7. Refresh on the frontend and you should see your searchbar.
   
8. If happy, click 'Save & Close' on the module in the backend.

To change the placeholder text inside the input field

1. Go to Components > Wise > Configurations > General options button.
2. On the right sidebar, click the Module: Wise SearchBar accordion.
3. You can enter any text you'd like into the Searchbar placeholder field and it will be reflected on the frontend of your website. Alternatively, you can also use a Language Override.
   
4. Click 'Save & Close' in the Top Toolbar.
5. Refresh on the frontend to view your changes.

You can also change the placeholder text inside the module settings individually if you'd like.

Styling and CSS for the Searchbar

You may find that on some pages of your website, the styling of the searchbar is different from other pages. This is because Wise and Joomla use different versions of Bootstrap. We will address this in the section below titled Bootstrap 3 (Wise) and Bootstrap 5 (Joomla).

Our template was blocking the suggested search and the drop-down next to the search button of the searchbar. This is the CSS I used to resolve those issues.

Note: #g-navigation is specific to the Gantry 5 template. It may be different for your template. We provide it as a guide to help.