Skip to main content

Move Search Bar into Navigation

Insert into Sitewide Custom before the footer section.

You will need to update styles to match hover color 

 

Add <div id="amplify-wrapper" data-amplify="true"> in a HTML Section on the Amplify homepage
 

> See it in action on a site.

 

A dark blue navigation bar with "About Us" and "How Do I" options, and part of a helmet below.

 

In Menu Search Script and Style 

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const isAmplifyPage = document.querySelector('[data-amplify="true"]');
    if (!isAmplifyPage) {
      console.info("Skipping search injection — not an Amplify layout.");
      return;
    }

    const searchBox = document.querySelector(".amplify-public-target-locator");
    const menuList = document.querySelector(".sl-modern-menu");

    if (!searchBox || !menuList || menuList.tagName !== "UL") return;
    if (menuList.querySelector(".search-icon-wrapper")) return;

    const searchItem = document.createElement("li");
    searchItem.className = "search-icon-wrapper";
    searchItem.setAttribute("role", "none");

    const link = document.createElement("a");
    link.href = "#";
    link.setAttribute("aria-label", "Search the site");
    link.setAttribute("role", "menuitem");
    link.appendChild(searchBox);

    link.addEventListener("click", function (e) {
      e.preventDefault();
    });

    searchItem.appendChild(link);
    menuList.appendChild(searchItem);
  });
</script>

<style>
  .search-icon-wrapper {
    display: inline-block;
    height: 100%;
  }

  .search-icon-wrapper a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    color: white;
    text-decoration: none;
    transition: background-color 0.2s ease;
    height: 100%;
    line-height: 1;
    background-color: transparent;
    box-sizing: border-box;
    cursor: pointer;
  }

  .search-icon-wrapper a:hover {
    background-color: #1a2944;
  }

  .search-icon-wrapper svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: white;
    stroke-width: 2;
    transition: transform 0.2s ease;
    vertical-align: middle;
  }

  .search-icon-wrapper a:hover svg {
    transform: scale(1.1);
  }

  /* Hide Amplify's dropdown/input */
  .amplify-public-target-locator input,
  .amplify-public-target-locator form,
  .amplify-public-target-locator .ais-SearchBox-form {
    display: none !important;
  }
</style>

A framed picture with vintage beer cans and text: "The Beer that Made Milwaukee Famous."

 

Move Search to Menu and add "Search" Label 

<script>
  function waitForSearchBox(callback, timeout = 5000) {
    const start = Date.now();

    (function check() {
      const searchBox = document.querySelector('.amplify-public-target-locator');
      const menuList = document.querySelector('.sl-modern-menu');

      if (searchBox && menuList && menuList.tagName === 'UL') {
        callback(searchBox, menuList);
      } else if (Date.now() - start < timeout) {
        setTimeout(check, 100);
      } else {
        console.warn("SearchBox or nav menu (ul) not found.");
      }
    })();
  }

  document.addEventListener("DOMContentLoaded", function () {
    waitForSearchBox(function (searchBox, menuList) {
      const searchItem = document.createElement('li');
      searchItem.className = 'search-icon-wrapper';
      searchItem.setAttribute('role', 'none');

      const link = document.createElement('a');
      link.href = '#';
      link.setAttribute('aria-label', 'Search the site');
      link.setAttribute('role', 'menuitem');
      link.classList.add('search-link');

      const wrapper = document.createElement('span');
      wrapper.className = 'search-content';

      const label = document.createElement('span');
      label.className = 'search-label';
      label.textContent = 'Search';

      // Move Amplify's search icon into wrapper
      wrapper.appendChild(label);
      wrapper.appendChild(searchBox);
      link.appendChild(wrapper);
      searchItem.appendChild(link);
      menuList.appendChild(searchItem);

      // ✅ Simulate click on Amplify's internal modal button
      searchItem.addEventListener('click', function (e) {
        e.preventDefault();
        const trigger = searchBox.querySelector('button') || searchBox.querySelector('svg');
        if (trigger) {
          trigger.dispatchEvent(new MouseEvent('click', { bubbles: true }));
        }
      });
    });
  });
</script>

<style>
.search-icon-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
  cursor: pointer;
}

.search-icon-wrapper a {
  display: flex;
  align-items: center;
  padding: 1em 1.2em; /* Match spacing of other items */
  color: white;
  text-decoration: none;
  height: 100%;
  box-sizing: border-box;
}

.search-content {
  display: flex;
  align-items: center;
  gap: 0.4em;
  line-height: 1; /* Keeps text from sitting too low */
}

.search-label {
  font-weight: bold;
  white-space: nowrap;
}

.search-icon-wrapper svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: white;
  stroke-width: 2;
  vertical-align: middle;
}

.search-icon-wrapper a:hover {
  background-color: #1a2944;
}

  .search-content {
    display: flex;
    align-items: center;
    gap: 0.4em;
  }

  .search-label {
    font-weight: bold;
    white-space: nowrap;
  }

  .search-icon-wrapper svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: white;
    stroke-width: 2;
    transition: transform 0.2s ease;
  }

  .search-icon-wrapper a:hover svg {
    transform: scale(1.1);
  }

  /* Hide default Amplify search bar UI */
  .amplify-public-target-locator input,
  .amplify-public-target-locator form,
  .amplify-public-target-locator .ais-SearchBox-form {
    display: none !important;
  }
</style>