Skip to main content

Add Search Label to Secondary Navigation

Add Search and  on click loads the search Modal without having to add a "Secondary Menu item"

You will need to update styles

>See it in action on a site

Add to Site-wide custom HTML before </head>

A partially visible vintage camera with a blue wheel, against a yellow background, beneath a "Search" bar on a dark blue background.
Adds Search before the icon in the header 

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const searchBox = document.querySelector(".amplify-public-target-locator");

    if (searchBox && !searchBox.classList.contains("search-enhanced")) {
      searchBox.classList.add("search-enhanced");

      // Create wrapper span
      const wrapper = document.createElement("span");
      wrapper.className = "search-inline-wrapper";

      // Create label
      const label = document.createElement("span");
label.className = "search-label search-inline-label";
      label.textContent = "Search";

      // Move children into wrapper
      while (searchBox.firstChild) {
        wrapper.appendChild(searchBox.firstChild);
      }

      // Insert label before icon
      wrapper.insertBefore(label, wrapper.firstChild);
      searchBox.appendChild(wrapper);

      // Attach click handler to wrapper AND label
      function triggerSearchModal() {
        const trigger = searchBox.querySelector("button, svg");
        if (trigger) {
          trigger.dispatchEvent(new MouseEvent("click", { bubbles: true }));
        }
      }

      wrapper.addEventListener("click", triggerSearchModal);
      label.addEventListener("click", triggerSearchModal);
    }
  });
</script>

<style>
  .amplify-public-target-locator.search-enhanced {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: white;
  }

.search-inline-wrapper {
  display: inline-flex;
  align-items: center;
}

.search-label {
  margin-right: 0.5em; /* ⬅️ This is the gap between text and icon */
  font-weight: bold;
  white-space: nowrap;
  color: white;
}

  .search-inline-label {
    font-weight: bold;
    font-size: 1rem;
    white-space: nowrap;
  }

  .amplify-public-target-locator svg {
    width: 20px;
    height: 20px;
    stroke: white;
    fill: none;
    stroke-width: 2;
    transition: transform 0.2s ease;
  }

  .amplify-public-target-locator:hover svg {
    transform: scale(1.1);
  }
</style>

Version for if there is another secondary nav item that adds the line and spacing for social media icons 

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const searchBox = document.querySelector(".amplify-public-target-locator");

    if (searchBox && !searchBox.classList.contains("search-enhanced")) {
      searchBox.classList.add("search-enhanced");

      // Create wrapper span
      const wrapper = document.createElement("span");
      wrapper.className = "search-inline-wrapper";

      // Create label
      const label = document.createElement("span");
label.className = "search-label search-inline-label";
      label.textContent = "Search";

      // Move children into wrapper
      while (searchBox.firstChild) {
        wrapper.appendChild(searchBox.firstChild);
      }

      // Insert label before icon
      wrapper.insertBefore(label, wrapper.firstChild);
      searchBox.appendChild(wrapper);

      // Attach click handler to wrapper AND label
      function triggerSearchModal() {
        const trigger = searchBox.querySelector("button, svg");
        if (trigger) {
          trigger.dispatchEvent(new MouseEvent("click", { bubbles: true }));
        }
      }

      wrapper.addEventListener("click", triggerSearchModal);
      label.addEventListener("click", triggerSearchModal);
    }
  });
</script>
<style>
  .amplify-public-target-locator.search-enhanced {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #114566;
  }
.search-inline-wrapper {
  display: inline-flex;
  align-items: center;
}
.search-label {
  margin-right: 0.5em; /* ⬅️ This is the gap between text and icon */
  font-weight: bold;
  white-space: nowrap;
  color: #114566;
}
  .search-inline-label {
    font-size: 1rem;
    white-space: nowrap;
    margin-left: 8px;
  }

  .amplify-public-target-locator svg {
    width: 20px;
    height: 20px;
    stroke: #114566;
    fill: none;
    stroke-width: 1;
    transition: transform 0.2s ease;
  }
.amplify-public-target-locator:hover svg {
    transform: scale(1.1);
  }
.amplify-header .container nav .secondary-container div {
    height: 24px;
    margin-top: 14px;
border-left: 1px solid #114566; /* You can replace #000 with any color you need */
}
</style>