title: Search that overlay nav menu
body: <p>Can you please help me create the same function as from Microsoft.com page for a search function?
  Here is what i need help with :</p>
  <ul>
  <li>Add Search Icon to top nav<a href="https://i.stack.imgur.com/neivy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/neivy.png" alt="enter image description here" /></a></li>
  <li>Clicking search icon will overlay search across nav<a href="https://i.stack.imgur.com/k51qr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k51qr.jpg" alt="enter image description here" /></a></li>
  <li>After entering search term, clicking enter or the search icon within the search bar will submit the search</li>
  <li>Clicking “cancel” button will hide search bar and reveal nav</li>
  </ul>
  <p>I am a semi- begginer so if you have detailed instructions that would be very helpful.</p>