Adding a search bar

Xway
1

This is an example of how to add a search bar to a website, using a markup item and some CSS markup. It displays a search bar in front of a menu, and uses Google to search a domain. It is based on the Ambient template. Although you cannot add a search bar directly to an Xway menu, you can place it in front of a menu by embedding the menu and search bar within a wrapper item (see below).

Note that although the sample document is based on the Ambient template, I have reduced its size by deleting most of the pages.

Ambient Search.zip (79.3 KB)

Here are some steps that you can use to add a search bar to a document that is based on the Ambient template:

  1. Create a new document that is based on the Ambient template
  2. Close the Home page in the Site panel
  3. Switch to the master page and option-click on it in the Site panel to display its contents
  4. Insert a box after the menu box and name it menu-wrapper
  5. Give it Sticky position and set its z-index to 999
  6. Cut the menu box and paste it into menu-wrapper
  7. Set the menu position to Relative (since Sticky position is now applied to its parent)
  8. Remove the minimum width and height from menu-wrapper
  9. Copy the searchbar box from the sample document
  10. Paste it after the menu box in the new document
  11. Copy CSS markup from the sample document (CSS Markup in the Page Inspector)
  12. Paste it in the CSS Markup section of the Page Inspector in the new document
  13. Select the search markup item and replace example.com with your own domain name

Note that you can change any of the styles that are applied to the searchbar item directly in Xway. The rounded corners are added as an extended property. You can also change the styles that are added to the search field using the CSS Markup section of the Page Inspector.

You should also be able to incorporate the searchbar into other page designs, adjusting styles and settings to match.

Possible improvement

I like the way that Apple incorporate a search icon in their menu bar, and display a drop-down section containing a search bar and some quick links when this is clicked on.

1 Like
2

I tried it out and it works great on a test page. When I get more time I’ll add it to the main site.

1 Like