Navbar user is logged in.

In this example below you will see how to do a Navbar user is logged in. with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Riotsmurf, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Riotsmurf ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Navbar user is logged in.</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

  
  
</head>

<body>

  <nav class="navbar has-shadow">
  <div class="navbar-brand is-hidden-mobile">
    <a class="navbar-item title">Confidence Analytics</a>
  </div>
  <div class="navbar-brand is-hidden-desktop">
    <a class="navbar-item">
      <img src="http://conflabs.com/wp-content/themes/ca/images/logo.png" alt="CA">
    </a>
    <div id="navbar-burger" class="navbar-burger burger">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
  <div id="navbar-menu" class="navbar-menu is-hidden-desktop">
      <div class="navbar-start">

        <a href="" class="navbar-item is-tab">My Results</a>
        <a href="" class="navbar-item is-tab">My analytics</a>
        <a href="" class="navbar-item is-tab">Transport</a>
        <a href="" class="navbar-item is-tab">Notifications</a>
        <a href="" class="navbar-item is-tab">Tickets</a>
        <a href="" class="navbar-item is-tab">My info</a>
      </div>
      <div class="navbar-end">
        <div class="navbar-item has-dropdown is-hoverable">
          <div class="">
            <strong>Welcome, {Trade Name}</strong>
          </div>
          <div class="navbar-dropdown">
            <a href="https://codepen.io/Riotsmurf/full/rzwGoN/" target="_parent" class="navbar-item">Logout</a>
          </div>
        </div>
      </div>
  </div>
  <div class="navbar-menu is-hidden-mobile">
      <div class="navbar-start"></div>
      <div class="nav-center">
        <a href="" class="navbar-item is-tab is-active">My Results</a>
        <a href="" class="navbar-item is-tab">My analytics</a>
        <a href="" class="navbar-item is-tab">Transport</a>
        <a href="" class="navbar-item is-tab">Notifications</a>
        <a href="" class="navbar-item is-tab">Tickets</a>
      </div>
      <div class="navbar-end">
        <div class="navbar-item has-dropdown is-hoverable">
          <a href="" class="navbar-link">
            <strong>Welcome, {Trade Name}</strong>
          </a>
          <div class="navbar-dropdown">
            <a href="" class="navbar-item is-tab">My info</a>
            <a href="https://codepen.io/Riotsmurf/full/rzwGoN/" target="_parent" class="navbar-item">Logout</a>
          </div>
        </div>
      </div>
  </div>
  
</nav>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Riotsmurf/navbar-user-is-logged-in-ZJyKXZ */
function toggleHamburgerMenu(){
  var ham = document.getElementById('navbar-burger');
  var menu = document.getElementById('navbar-menu');
  
  if(ham.classList.contains('is-active') && menu.classList.contains('is-active')){
    ham.classList.remove('is-active');
    menu.classList.remove('is-active');
  }else{
    ham.classList.add('is-active');
    menu.classList.add('is-active');
  }
}
document.getElementById("navbar-burger").addEventListener("click", toggleHamburgerMenu);

Comments