Menu

Add Search Bar To Menu (Heelium Theme Only)

First this specific example is available only for sites with the Heelium WordPress Theme. If you’re unsure what theme your site is using please contact our Web Service Team or enter the URL/address of your site in this WordPress Theme Detector Tool.

This is an option to inject a search bar directly into the menu list of your site. Once this option is applied, any time your menu is loaded a search icon will automatically be added as the last item of your menu. If a user clicks on this icon a search bar with a submit button will pop up under it, and if a user clicks on the icon again the search bar with a submit button will disappear. The search bar can be used to search the whole website for any content it might contain. To see how this works, please view the screenshots below or please go to this link to a page that uses this added search bar menu item.

Search Bar in Menu Closed Screenshot
Search Bar In Menu Open Screenshot


Requirements

Directions

This ONLY works with the Heelium Theme and the free version of Font Awesome loaded. To create a search bar in menu as pictured above will require the web developer to create a content template in Toolset and then add the content template short-code into a Custom HTML widget in the Footer Widget area. The JavaScript below is the code that should be added into the JavaScript section of the content template. MAKE SURE to adjust the site that will be searched where it say ENTER YOUR SITE URL HERE in the code below and adjust the CSS to your specifications on your site.

Code

JavaScript


document.addEventListener('DOMContentLoaded', function () {
    var menu = document.getElementById('menu-main');

    var searchBarContainer = document.createElement('div');
    searchBarContainer.id = 'searchBarContainer';
    searchBarContainer.setAttribute('aria-labelledby', 'searchIconLink');
    searchBarContainer.style.display = 'none';
    searchBarContainer.style.flex = '0 1 auto';
    searchBarContainer.style.width = '96%';
    searchBarContainer.style.justifyContent = 'flex-end';
    searchBarContainer.innerHTML = `
        <form role="search" method="get" class="search-form" action="ENTER YOUR SITE URL HERE">
            <div class="input-group">
                <input type="search" aria-label="Search this site" id="search" name="s" class="search-field form-control" placeholder="Search this site...">
                <span class="input-group-btn">
                    <button aria-labelledby="header-search" id="Submit" class="search-submit btn btn-default">
                        <span class="glyphicon glyphicon-search"></span>
                        <span id="header-search" class="hidden">Submit Search</span>
                    </button>
                </span>
            </div>
        </form>`;

    menu.parentNode.insertBefore(searchBarContainer, menu.nextSibling);

    var searchLi = document.createElement('li');
    searchLi.className = 'menu-search-icon';
    searchLi.innerHTML = `
        <button id="searchIconLink" aria-controls="searchBarContainer" aria-expanded="false" aria-label="Open search bar" style="background: none; border: none; cursor: pointer;">
            <i class="fa-solid fa-magnifying-glass"></i>
        </button>`;
    menu.appendChild(searchLi);

    var searchIconLink = document.getElementById('searchIconLink');
    var searchBar = document.getElementById('searchBarContainer');

    searchIconLink.addEventListener('click', function () {
        var isExpanded = searchIconLink.getAttribute('aria-expanded') === 'true';
        searchIconLink.setAttribute('aria-expanded', !isExpanded);
        searchBar.style.display = isExpanded ? 'none' : 'flex';
        searchIconLink.setAttribute('aria-label', isExpanded ? 'Open search bar' : 'Close search bar');
    });
});