Back to Snippets

Fullscreen Navigation Overlay JS

Create an immersive navigation experience with this fullscreen overlay. When the menu button is clicked, the navigation expands to cover the entire screen, giving you plenty of space for large, readable links.

406

#javascript

#css

#navigation

#fullscreen

#overlay

#menu

#mobile

#ui

/HTML *CSS ()JS Output Live Updates

.menu-trigger {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  padding: 10px 20px;
  background: #111827;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
}
.full-overlay {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  background-color: #111827;
  overflow-x: hidden;
  transition: width 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}
.full-overlay.open {
  width: 100%;
}
.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.overlay-content a {
  text-decoration: none;
  font-size: 2.5rem;
  color: #9ca3af;
  transition: color 0.3s;
  font-weight: 700;
}
.overlay-content a:hover {
  color: #fff;
}
.close-trigger {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 3rem;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

Fullscreen Navigation Overlay JS

Share Code Snippet