Navbar User is not logged in.

In this example below you will see how to do a Navbar User is not 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 ©
  • HTML
  • CSS
  • JavaScript
    <nav class="navbar has-shadow">
  <div class="nav-center">
    <div class="navbar-item">
      <a href="" class="title">
        Confidence Analytics
      </a>
    </div>
  </div>
  
</nav>
<div class="columns">
  
  <div class="column"></div>
  <div class="column">
    <br>
    <div class="box">
      <div class="field">
        <label class="label">Email</label>
        <div class="control has-icons-left has-icons-right">
          <input class="input" type="text" placeholder="Example@email.com">
          <span class="icon is-small is-left">
            <i class="fa fa-envelope"></i>
          </span>
        </div>
      </div>
      <div class="field">
        <label class="label">Password</label>
        <div class="control has-icons-left has-icons-right">
          <input class="input" type="password" placeholder="Password">
          <span class="icon is-small is-left">
            <i class="fa fa-user-secret"></i>
          </span>
        </div>
      </div>
      <div class="field is-grouped">
        <div class="control">
          <a href="https://codepen.io/Riotsmurf/full/ZJyKXZ/" target="_parent"class="button is-primary">Login</a>
        </div>
        <div class="control">
          <a href="">Forgot password?</a>
        </div>
      </div>
    </div>
  </div>
  <div class="column"></div>
</div>

/*Downloaded from https://www.codeseek.co/Riotsmurf/navbar-user-is-not-logged-in-rzwGoN */
    


/*Downloaded from https://www.codeseek.co/Riotsmurf/navbar-user-is-not-logged-in-rzwGoN */
    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