navbar.html

<div class="container" id="lg-navbar">

  <div class="navbar-translate" style="width: 100%;">
    <a class="navbar-brand" href="/"><span id="dsc-logo"><img src="../assets/img/logos/DSCHBTU-LOGO.png" /></span></a>
    <!--<button class="navbar-toggler black-lighten-5" type="button" data-toggle="collapse" aria-expanded="false"
      aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      <span class="navbar-toggler-icon"></span>
      <span class="navbar-toggler-icon"></span>
    </button>-->
  </div>

  <nav class="collapse navbar-collapse">
    <ul class="navbar-nav ml-auto">

      <li class="dropdown nav-item">
        <a href="/" data-page="index" class="nav-link">
          <span><b>Home</b></span>
        </a>
      </li>

      <li class="nav-item">
        <a href="./events" data-page="events" class="nav-link">
          <span><b id="header_text">Events</b></span>
        </a>
      </li>

      <li class="nav-item">
        <a href="./resources" data-page="resources" class="nav-link">
          <span><b id="header_text">Resources</b></span>
        </a>
      </li>

      <li class="nav-item">
        <a href="./projects" data-page="projects" class="nav-link">
          <span><b id="header_text">Projects</b></span>
        </a>
      </li>

      <li class="nav-item">
        <a href="./team" data-page="team" class="nav-link">
          <span><b id="header_text">Team</b></span>
        </a>
      </li>

      <li class="nav-item">
        <a target="blank" class="nav-link" href="https://gdsc.community.dev/harcourt-butler-technical-university/">
          <span class="btn" id="joinbtn"><b id="header_text">Join Us</b></span>
        </a>
      </li>

    </ul>
  </nav>
</div>

<!-- For Mobile Device Only -->
<div id="md-navbar">
  <nav class="navbar-translate container">
    <a class="navbar-brand" style="padding: 10px 
    15px;" href="/"><span id="dsc-logo"><img
          src="../assets/img/logos/DSC_LOGO.png" /></span></a>
    <a target="blank" class="nav-link" href="https://gdsc.community.dev/harcourt-butler-technical-university/">
      <span class="btn" id="joinbtn" style="padding: 10px 30px;"><b id="header_text">Join Us</b></span>
    </a>
  </nav>

  <nav class="nav">
    <a href="/" class="nav__link nav__link--active">
      <i class="material-icons nav__icon">home</i>
      <span class="nav__text">Home</span>
    </a>
    <a href="/events" class="nav__link">
      <i class="material-icons nav__icon">event_available</i>
      <span class="nav__text">Events</span>
    </a>
    <a href="/resources" class="nav__link">
      <i class="material-icons nav__icon">computer</i>
      <span class="nav__text">Resources</span>
    </a>
    <a href="/projects" class="nav__link">
      <i class="material-icons nav__icon">emoji_objects</i>
      <span class="nav__text">Projects</span>
    </a>
    <a href="/team" class="nav__link">
      <i class="material-icons nav__icon">group</i>
      <span class="nav__text">Team</span>
    </a>
    <!--<a href="#" class="nav__link">
      <i class="material-icons nav__icon">rss_feed</i>
      <span class="nav__text">Blog</span>
    </a>-->
  </nav>
</div>