Navigation Bar

In this example below you will see how to do a Navigation Bar with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Navigation Bar</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <head>
  <title> </title>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="https://s.gravatar.com/avatar/b8575354164480164f74b94db4133714?size=496&default=retro" crossorigin="anonymous">
</head>
<body>
 <div id="javaEdits">
  <div class="header">
  <ul>
  <li><a href="#home">Login</a></li>
  <li><a href="#news">Sign up</a></li>
  <li><a href="#contact">Help</a></li>
  <li><a href="#home">Become a Host?</a></li>
  <li style="float:right"><a class="active" href="#about">No time to host?</a></li>
   <img style="-webkit-user-select: none;background-position: 0px 0px, 10px 10px;background-size: 20px 20px;background-image:linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);" src="https://s.gravatar.com/avatar/b8575354164480164f74b94db4133714?size=496&amp;default=retro">
    </ul>
   </div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/-charisma-/navigation-bar-NgPMwG */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: ;
}

li {
    float: right;
}

li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.logo img{
  width: 50%;
  height: 20px;
}

Comments