GlobalSearch (formally RapidSearch Helper) is a free stack. It's intended for users of our various search stacks. It gives your search box style capabilities more of a "turbo boost". Several different designs of modern search boxes are offered, together with corresponding style and colour settings.

To use GlobalSearch, simply add this stack to a Stacks page. In the stack settings, provide the link to your webpage that is hosting your search page. Then choose a search box design you want to use and play around with the settings. Zero code or complicated configuration is required, to accomplish the basics. Neither are any theme modifications needed.

Examples

These are some examples of GlobalSearch stacks, configured to send search keywords to our search page (built with Indexer). The colour scheme and styling of most search box styles is customisable and we attempt to inherit some styling (like font faces) from your theme.

Using reveals

Normally a search box will be displayed within the page flow - in other words wherever you drop the stack into the page. However it is possible to have the search box displayed elsewhere within the page; revealed within an attractive popup or overlay. This can be accomplished using the Reveals option in the stack. When a reveal effect is applied, the search box is hidden on page load. The search box only comes into view when a link or button is clicked. And the search box only disappears again when the page is reloaded or you click outside of the search box.

For each reveal, you will need to provide the element or ID of the link or button to trigger the search box. This might be as simple as a link or button with an ID of searchBox. Alternatively you may wish to use a named element from another stack. The web inspector can always help you obtain class or ID selector names to use. It is possible for multiple buttons or links to trigger the same search box on a page. Different reveals have different style and colour settings available to customise.

Reveals are intended for use in "average" webpages - webpages where there are typically no special effects happening (like loading animations or parallax scrolling). In more complex setups, the compatibility of reveals starts to diminish. You may need to use additional custom Javascript or CSS to get reveals to work in very complicated pages.

Popup search boxes from the nav bar

You can attempt to make the final link in your website navigation menu trigger the display of a search box. To accomplish this, change the Reveal setting to Popup. Then for the search button selector, enter the following selector name:

nav > ul:first-of-type > li:last-child > a

This certainly will not work universally in all RapidWeaver themes (you may need to hire us to do it for you). But in essence, what it attempts to do is traverse your parent level navigation links and grab the last parent link it sees. It will disable the normal link and instead turn the link into a button that can be clicked to trigger the popup search box.

The technique works on both mobile and desktop navigation. You could change the link title to say 'search' or replace the text with a Font Awesome icon. Now when a user clicks on the last parent navigation link, they will see your search box appear within a popup. Include GlobalSearch as a Stacks partial on each webpage, wherever you want this behaviour to take effect.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.