header.html

<div class = "topbar" style="z-index:2; background-color: #19191a">
   <a class="topbar-logo" href="index.html">
     <img src="./images/logo2.png" width="150" height="150" style="padding-left:20px;padding-right:20px; transform: translateY(-8px); background-color: #19191a;">
     <!--<span class="lt" style="font-weight: 700;">Vikings Robotics</span>-->
   </a>

   <!-- <a role="button" class="topbar-burger" aria-label="menu" aria-expanded="false">
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
  </a> -->

  <button class="topbar-burger" id ="burger" style="filter: invert(100%) sepia(25%) saturate(0%) hue-rotate(11deg) brightness(116%) contrast(101%); transform: translateY(-5px);" onclick="toggleDropdown()">
      <img src="images/iconmonstr-menu-1.svg">
  </button>
   
   <div id="navbarBasicExample" class="topbar-menu" style="transform: translateY(-5px);">
      <a class="t top-button" style="padding-right: 30px;" href="about.html">ABOUT</a>

      <a class="t top-button" style="padding-right: 30px;" href="outreach.html">OUTREACH</a>

      <a class="t top-button join-link" style ="padding-right:30px;" href="join.html">JOIN
      </a>

      <a class="t top-button sponsor-link" style ="padding-right:30px;" href="sponsors.html">SPONSORS
      </a>

      <a class="t top-button" style ="padding-right:30px;" href="resources.html">RESOURCES
      </a>

      <a class="t top-button" style ="padding-right:30px;" href="calendar.html">CALENDAR
      </a>

      <a class="t top-button" style="padding-right: 30px;" href="contact.html">CONTACTS</a>
   </div>
</div>
<div class="topbar-dropdown" id="dropdown" style="z-index:1;display:none;">
   <a class="t top-button join-link" href="about.html">ABOUT</a>
   <a class="t top-button join-link" href="outreach.html">OUTREACH</a>
   <a class="t top-button join-link" href="join.html">JOIN</a>
   <a class="t top-button sponsor-link" href="sponsors.html">SPONSORS</a>
   <a class="t top-button" href="resources.html">RESOURCES</a>
   <a class="t top-button" href="calendar.html">CALDENDAR</a>
   <a class="t top-button" href="contact.html">CONTACT</a>
</div>