Skip to main content
Practice

Hamburger Menu Style

In this lesson, we will examine how the style is applied to a hamburger menu.

HTML:​

This tag is used as the container for the entire navigation bar. It is the main tag for grouping the menu items of a website.

<nav class="navbar"></nav>

This area displays the logo or title of the website. It is set up as a clickable link.

<span id="logo">
  <a href="https://example.com">Website Title</a>
</span>

<ul class="nav-menu">​

This is a list containing the main menu items. Each item is represented by an <li> tag.

<ul class="nav-menu">
  <li><a class="nav-link" href="#about">About</a></li>
  <!-- Other menu items -->
</ul>

<div class="hamburger">​

This is the hamburger menu icon used on mobile screens for toggling the menu on and off.

<div class="hamburger">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</div>

CSS:​

@media (max-width: 670px) means that the following styles will apply when the screen width is 670px or less.

The style for the menu items on mobile screens.

CSS
.navbar .nav-menu {
  position: fixed;
  right: -100vw;
  /* ... other style properties ... */
}

The style applied when the menu is active (i.e., when the hamburger icon is clicked).

CSS
.nav-menu.active {
  right: 20px;
}

.hamburger The default style for the hamburger menu icon.

CSS
.hamburger {
  display: block;
  cursor: pointer;
  /* ... */
}

.hamburger.active .bar​

Transforms the style of each line when the hamburger icon is active (menu opened).

CSS
.hamburger.active .bar:nth-child(2) {
  opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

With this setup, when the user clicks the hamburger icon, the menu will slide out and the icon will change to an 'X' shape. Clicking it again will hide the menu and return the icon to its original state.

Additional JavaScript code is needed to execute this behavior. In the next lesson, we will look at how JavaScript is applied.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.