Navigation Bar

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

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
Copyright -charisma- ©


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

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



  <title> </title>
<link rel="stylesheet" href="" integrity="" crossorigin="anonymous">
 <div id="javaEdits">
  <div class="header">
  <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=";default=retro">



/*Downloaded from */
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;