Pure CSS Navbar with Hamburger Button

This pure CSS code project helps you to create a responsive navbar with a hamburger button. The navbar converts into a hamburger menu on mobile devices. It uses HTML checkbox input and CSS checked pseudo selector to toggle the hamburger menu.

How to Create a Pure CSS Navbar

First of all, create a div element with a class  "nav" to represent the navigation container. Likewise, create a checkbox input with an id of "nav-check" that will hold the hamburger check/unchecked state. Similarly, create a div with the class "nav-header" to contain the navigation title:

Create a div with the class "nav-title" and place the name of your website. Define a div with the class "nav-btn" to contain the label for the checkbox. Create a div with the class "nav-links" and place your navigational links inside it.

<div class="nav">
  <input type="checkbox" id="nav-check">
  <div class="nav-header">
    <div class="nav-title">
      JoGeek
    </div>
  </div>
  <div class="nav-btn">
    <label for="nav-check">
      <span></span>
      <span></span>
      <span></span>
    </label>
  </div>
  
  <div class="nav-links">
    <a href="//github.io/jo_geek" target="_blank">Github</a>
    <a href="http://stackoverflow.com/users/4084003/" target="_blank">Stackoverflow</a>
    <a href="https://in.linkedin.com/in/jonesvinothjoseph" target="_blank">LinkedIn</a>
    <a href="https://codepen.io/jo_Geek/" target="_blank">Codepen</a>
    <a href="https://jsfiddle.net/user/jo_Geek/" target="_blank">JsFiddle</a>
  </div>
</div>

Style the navbar using the following CSS styles:

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  font-family: 'segoe ui';
}

.nav {
  height: 50px;
  width: 100%;
  background-color: #4d4d4d;
  position: relative;
}

.nav > .nav-header {
  display: inline;
}

.nav > .nav-header > .nav-title {
  display: inline-block;
  font-size: 22px;
  color: #fff;
  padding: 10px 10px 10px 10px;
}

.nav > .nav-btn {
  display: none;
}

.nav > .nav-links {
  display: inline;
  float: right;
  font-size: 18px;
}

.nav > .nav-links > a {
  display: inline-block;
  padding: 13px 10px 13px 10px;
  text-decoration: none;
  color: #efefef;
}

.nav > .nav-links > a:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.nav > #nav-check {
  display: none;
}

@media (max-width:600px) {
  .nav > .nav-btn {
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 0px;
  }
  .nav > .nav-btn > label {
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 13px;
  }
  .nav > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {
    background-color: rgba(0, 0, 0, 0.3);
  }
  .nav > .nav-btn > label > span {
    display: block;
    width: 25px;
    height: 10px;
    border-top: 2px solid #eee;
  }
  .nav > .nav-links {
    position: absolute;
    display: block;
    width: 100%;
    background-color: #333;
    height: 0px;
    transition: all 0.3s ease-in;
    overflow-y: hidden;
    top: 50px;
    left: 0px;
  }
  .nav > .nav-links > a {
    display: block;
    width: 100%;
  }
  .nav > #nav-check:not(:checked) ~ .nav-links {
    height: 0px;
  }
  .nav > #nav-check:checked ~ .nav-links {
    height: calc(100vh - 50px);
    overflow-y: auto;
  }
}

CSS Code Explanation

The first rule sets the box-sizing property to border-box, which includes the padding and border within an element’s total width and height.

The second rule sets the margin of the body element to 0px and specifies the font-family to be 'segoe ui'.

The third rule styles the container for the navigation bar, .nav. It sets its height to 50px, its width to 100%, its background-color to #4d4d4d, and its position to relative.

The fourth rule styles the header section of the navigation bar, .nav-header. It sets its display property to inline.

The fifth rule styles the title text in the navigation bar, .nav-title. It sets its display property to inline-block, its font-size to 22px, its color to #fff, and its padding to 10px on all sides.

The sixth rule styles the button that toggles the navigation bar on small screens, .nav-btn. It sets its display property to none.

The seventh rule styles the links section of the navigation bar, .nav-links. It sets its display property to inline, its float property to right, and its font-size to 18px.

The eighth rule styles the links in the navigation bar, .nav-links > a. It sets their display property to inline-block, their padding to 13px on the top and bottom and 10px on the left and right, their text-decoration to none, and their color to #efefef.

The ninth rule styles the links in the navigation bar when hovered over, .nav-links > a:hover. It sets their background-color to rgba(0, 0, 0, 0.3).

The tenth rule targets the checkbox that toggles the navigation bar on small screens, #nav-check. It sets its display property to none.

The eleventh rule defines styles that are applied when the screen width is less than or equal to 600px. It sets the display property of .nav-btn to inline-block, its position to absolute, and its right and top properties to 0px.

It also styles the button label with a background-color when hovered over or when the #nav-check checkbox is checked, and sets the height and width of the lines within the button using span elements.

Additionally, it styles the links section of the navigation bar when it is shown on small screens, setting its position to absolute, its display property to block, its width to 100%, its background-color to #333, its height to 0px with a smooth transition effect, and its overflow-y to hidden.

It sets the top property to 50px to align it with the header, and the left property to 0px. The links themselves are styled to be full width and block-level elements.

The #nav-check checkbox is used to toggle the display of the links, with the :not(:checked) selector.

That’s all! hopefully, you have successfully created Pure Css Navbar. If you have any questions or suggestions, feel free to comment below.