Adding Search to Header

Description

• adding search icon to header
• click search icon will open search page

#1. Business Plan/higher

You can use this code to Code Injection > Footer

<script>
function addSearchIcons() {
  const searchIcon = `
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="width: 20px; height: 20px; cursor: pointer; vertical-align: middle;">
      <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
    </svg>
  `;
  
  document.querySelectorAll('a.btn').forEach(btn => {
    if (!btn.previousElementSibling?.classList.contains('wm-search-icon')) {
      const iconWrapper = document.createElement('a');
      iconWrapper.className = 'wm-search-icon';
      iconWrapper.href = '/search';
      iconWrapper.innerHTML = searchIcon;
      iconWrapper.style.cssText = 'display: inline-block; margin-right: 10px; text-decoration: none;';
      
      btn.parentNode.insertBefore(iconWrapper, btn);
    }
  });
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', addSearchIcons);
} else {
  addSearchIcons();
}
</script>
<style>
.header-menu-cta {
    flex-direction: column;
    display: flex;
}
.header-menu-cta span.wm-search-icon {
    margin-left: 5.5vw;
}
.header-menu-cta a.wm-search-icon {
    background: unset !important;
}
</style>

#2. Personal/Basic Plan

You can edit Site Footer

Add a Block

Choose Markdown

Paste this code

<script src="https://code.beaverhero.com/header/searchicon.js"></script>