CSS Basics • Create a Hamburger Icon with HTML and CSS only

Create a Responsive Navigation

Responsive Web Design has become the standard now when it comes to the design of a website. This is because potential visitors to the site are no longer just surfing with a desktop computer or laptop, but are also using mobile devices such as a smartphone or tablet computer more and more frequently. In a digital world that is becoming more and more mobile, the optimal user experience for all types of devices is of paramount importance.

A good and user-friendly navigation is not just a nice-to-have, but a necessity to ensure that visitors find the information they are looking for as quickly as possible.

The Responsive Navigation automatically adapts to different screen sizes. It works as well on the large desktop monitor as it does on the small smartphone display. When designing a website, the mobile navigation is a special challenge. To make the mobile experience as satisfying as the desktop experience, take the time to create a responsive navigation that works well on any device.

With this guide you will learn how to create a responsive navigation for your website. To expand and collapse the mobile navigation, we use a so-called Hamburger Menu, which doesn't require JavaScript to work..

Basics of the Responsive Navigation

A responsive navigation is usually based on the following fundamental principles:<\p>

Flexible Layout: The navigation should automatically adapt and change its design depending on the available screen width.
Expanding and Collapsing: On smaller screens, the menu is often replaced by a Hamburger-Icon, which you can expand or collapse by tapping or clicking on it.
CSS-only Solution: JavaScript, jQuery, or any other JS extension is not absolutely necessary to create responsive navigation. Although we can assume that JavaScript is available on every device today, the most stable solution for a navigation is HTML and CSS that does not require JavaScript.
Animation and Transition: CSS animations and transitions can be used to ensure a smooth user experience.

HTML Structure of the Responsive Navigation

The typical HTML markup of a Responsive Navigation looks like this

Basic Styles to create a simple responsive navigation

/* Responsive Navigation: display: inline-block */
nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

nav li {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 10em;
  background: #999999;
  color: #ffffff;
}

nav a {
  display: block;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #ffffff;
}

nav a:hover {
  background: #ffa500;
  color: #000000;
}

@media screen and (min-width: 768px) {
  nav ul {
    background: #999999;
  }

  nav li {
    display: block;
    margin: 1em auto;
    width: 100%;
  }
}

Create a basic structure for a simple responsive navigation

<h2>Responsive Navigation with display: inline-block</h2>

<nav>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Our Service</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</nav>

Responsive Navigation with display: inline-block

Create the Hamburger Menu

The Hamburger-Icon, consisting of three parallel horizontal lines (also called Trigram or Triple Bar), has become de facto standard for Touch Screens for the top navigation on mobile devices. The hamburger button is usually taken from an extensive icon collection. We create the icon using five simple HTML tags and a pinch of CSS.

Styling the Hamburger Icon:

Styling the button

.hbRow {
  position: relative;
}

input#hamburger {
  display: none;
}

label.hamburger {
  display: none;
  position: relative;
  margin: 0.5em auto;
  width: 74px;
  height: 50px;
  background: #dddddd;
  border-radius: 4px;
}

.hbLine {
  display: block;
  position: absolute;
  left: 10px;
  width: 56px;
  height: 4px;
  background: transparent;
  border-radius: 2px;
  transition: 0.5s;
  transform-origin: center;
}

.hbLine:nth-child(1) {
  top: 12px;
  background: #ffffff;
}

.hbLine:nth-child(2) {
  top: 24px;
  background: #ffffff;
}

.hbLine:nth-child(3) {
  top: 36px;
  background: #ffffff;
}

#hamburger:checked + .hamburger .hbLine:nth-child(1) {
  transform: translateY(12px) rotate(45deg);
}

#hamburger:checked + .hamburger .hbLine:nth-child(2) {
  opacity: 0;
}

#hamburger:checked + .hamburger .hbLine:nth-child(3) {
  transform: translateY(-12px) rotate(-45deg);
}

#hamburger:checked + .hamburger {
  background: #ed3c3c;
}

The plus sign (+) is used to select the adjacent element. Here it is: <label for= "hamburger" class= "hamburger">

Markup a Hamburger Icon that works without JavaScript:

Hamburger Icon

<div class="hbRow">
<input type="checkbox" id="hamburger">
<label for="hamburger" class="hamburger">
<span class="hbLine"></span>
<span class="hbLine"></span>
<span class="hbLine"></span>
</label>
</div>

Hamburger-Icon

Functionality of the Burger Menu

Behind the hamburger button is usually the main navigation of the website. Due to the limited space available on smartphones and tablets, the hamburger button to expand the navigation is mostly only shown on small displays.

Clicking or tapping the button will display the navigation and moving the main content. The three horizontal lines will change to a large X that is created to collapse the navigation. To do this, the middle line is hidden and the first and third line are rotated by 45 respectively -45 degrees.

Many CMS such as WordPress or Joomla use a lot of JavaScript code. However, this is not necessary as HTML and CSS are perfectly sufficient.

The Hamburger Menu presented on this page does not require JavaScript to work.

Responsive Navigation with Hamburger Menu and Media Queries

The Hamburger icon is placed in a LABEL tag that is connected with the INPUT element via the for attribute. It reacts to clicks or taps, along with the input element. This behavior is the well-known Checkbox Hack.

On desktop computers and laptops, a website is usually displayed in widescreen format. We therefore create horizontal navigation for devices that have a screen width of more than 800px:

Styling horizontal navigation

/* Part 1: Horizontal Navigation */
nav#mainNav {
  display: block;
  margin-bottom: 0.5em;
}

#mainNav ul {
  margin: 0;
  padding: 0;
  height: auto;
  list-style-type: none;
}

#mainNav li {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: fit-content;
  background: #6ccd6c;
}

#mainNav a {
  display: block;
  padding: 0.5em 1em;
  min-width: 8em;
  text-align: center;
  text-decoration: none;
  background: #cccccc;
  color: #000000;
}

nav li a:hover:not(.active) {
  background: #bbbbbb;
  color: #000000;
}

nav li a.active {
  font-weight: bold;
  background: #04aa6d;
  color: #ffffff;
}

Mobile devices are typically used to view websites in portrait mode. Due to the small screen width of smartphones in this orientation, navigation needs to be presented differently than on desktops. The hamburger button allows the user to expand or collapse the menu as required.

The hamburger button presented here does not require JavaScript to work.

Hamburger button styling

/* Part 2: Hamburger Button */
.hbRow {
  position: relative;
}

input#hamburger {
  display: none;
}

label.hamburger {
  display: none;
  position: relative;
  margin: 0.5em auto;
  width: 74px;
  height: 50px;
  background: #dddddd;
  border-radius: 4px;
}

.hbLine {
  display: block;
  position: absolute;
  left: 10px;
  width: 56px;
  height: 4px;
  background: transparent;
  border-radius: 2px;
  transition: 0.5s;
  transform-origin: center;
}

.hbLine:nth-child(1) {
  top: 12px;
  background: #000000;
}

.hbLine:nth-child(2) {
  top: 24px;
  background: #000000;
}

.hbLine:nth-child(3) {
  top: 36px;
  background: #000000;
}

#hamburger:checked + .hamburger .hbLine:nth-child(1) {
  transform: transform(12px) rotate(45deg);
}

#hamburger:checked + .hamburger .hbLine:nth-child(2) {
  opacity: 0;
}

#hamburger:checked + .hamburger .hbLine:nth-child(3) {
  transform: transform(-12px) rotate(-45deg);
}

#hamburger:checked + .hamburger {
  background: #ed3c3c;
}

On smartphones or tablets in portrait format with a screen width of 800px or below, the horizontal navigation is hidden. Instead, a hamburger button is displayed to allow the user to expand or collapse the menu by clicking or tapping.

Mobile navigation styles

/* Part 3: Styling the Mobile Navigation */
.topMenu {
  height: auto;
  overflow: hidden;
  background: transparent;
  transition: all 0.5s;
}

#hamburger:checked + .hamburger + .topMenu {
  height: auto;
  max-height: 100em;
  background: transparent;
}

@media screen and (max-width: 800px) {
  label.hamburger {
    display: block;
  }

  .topMenu {
    max-height: 0;
  }

  .topMenu ul li {
    padding-top: 1ex;
    padding-bottom: 1ex;
  }

  #mainNav ul {
    position: relative;
    width: 100%;
    height: auto;
  }

  #mainNav li {
    width: 100%;
    height: auto;
  }

  #mainNav ul li a {
    padding: 1em 0.5em;
  }
}

Markup the Responsive Navigation, no JavaScript required

<h2>Responsive Navigation with Hamburger Button</h2>

<nav id="mainNav">
<div class="hbRow">
<input type="checkbox" id="hamburger">
<label for="hamburger" class="hamburger">
<span class="hbLine"></span>
<span class="hbLine"></span>
<span class="hbLine"></span>
</label>
<nav>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Our Service</a></li>
  <li><a href="#">Latest Promotions</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</nav>

CSS Basics: From Static to Stunning – Create a Responsive Navigation That Adapts to Any Device