Responsive Navbar

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

Check it out

Thumbnail
This awesome code was written by Freecence, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Freecence ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

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

  
</head>

<body>

  <div id="navbar">
  <div class="item">Box Shadow</div>
  <div class="item">Border Radius</div>
  <div class="item">Text Shadow</div>
  <div class="item">Transition</div>
  <div class="item item-right">About</div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Freecence/responsive-navbar-OVyMgV */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body{
  margin: 0;
  font-family: 'Open Sans', sans-serif;
}
#navbar{
  position: absolute;
  background: #DD4814;
  height: 10vh;
  width: 70vw;
  margin-left: 15vw;
  margin-top: 1vh;
  border-radius: 5px;
  transition: 500ms ease-in-out;
}
.item{
  display: inline-block;
  font-size: 1em;
  margin: calc(5vh - 0.5em);
  padding-left: 1vw;
  padding-right: 1vw;
  border-left-style: solid;
  border-right-style: solid;
  border-top-style: solid;
  border-width: 2px;
  border-color: #e67e22;
  border-top-color: #e74c3c;
  border-top-color: #DD4814;
  transition: 500ms ease-in-out;
}
.item:hover{
  border-top-color: #8e44ad;
}
.item-right{
  float: right;
}
@media (max-width: 1330px){
  #navbar{
    width: 100vw;
    margin-left: 0;
    border-radius: 0;
    margin-top: 0;
  }
  .item{
    padding: 0;
    border-style: none;
  }
}
@media (max-width: 775px){
  #navbar{
    width: 100vw;
    margin-left: 0;
    border-radius: 0;
    margin-top: 0;
    height: inherit;
    text-align: center;
  }
  .item{
    padding: 0;
    border-style: none;
  }
  .item-right{
    float: left;
  }
}

Comments