Centered Scaling Navigation Bar

Live Preview

Documentation

Webflow

Code

Setup: External Scripts

HTML

Copy

Step 1: Copy structure to Webflow

Copy to Webflow

Webflow structure is not required for this resource.

Step 1: Add HTML

HTML

Copy

<nav data-navigation-status="not-active" class="navigation">
  <div data-navigation-toggle="close" class="navigation__dark-bg"></div>
  <div class="centered-nav">
    <div class="centered-nav__bg"></div>
    <div class="centered-nav__header">
      <a href="#" class="centered-nav__logo">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 120 28" fill="none" class="centered-nav__logo-svg"><path d="M109.059 9.6298C108.636 10.051 107.912 9.7527 107.912 9.15698V0.626465H105.226V10.6566C105.226 11.7645 104.324 12.6626 103.211 12.6626H93.1377V15.3373H101.705C102.303 15.3373 102.603 16.0575 102.18 16.4788L96.2174 22.4157L98.1169 24.307L104.08 18.3701C104.501 17.9501 105.222 18.2454 105.226 18.8376V27.3734L107.912 27.3735L107.912 17.3433C107.912 16.2354 108.814 15.3373 109.927 15.3373H120.001V12.6626H111.428C110.835 12.6583 110.538 11.9453 110.954 11.5248L110.958 11.5211L116.921 5.58416L115.021 3.69288L109.059 9.6298Z" fill="currentColor"></path><path d="M10.8432 25.4864C4.23224 25.4864 0 20.6572 0 14.044C0 7.43085 4.23224 2.63245 10.8432 2.63245C17.4541 2.63245 21.6863 7.43085 21.6863 14.044C21.6863 20.6572 17.4541 25.4864 10.8432 25.4864ZM3.55261 14.044C3.55261 18.5656 5.62239 22.5643 10.8432 22.5643C16.064 22.5643 18.1337 18.5656 18.1337 14.044C18.1337 9.52246 16.064 5.55455 10.8432 5.55455C5.62239 5.55455 3.55261 9.52246 3.55261 14.044Z" fill="currentColor"></path><path d="M30.6593 25.4864C25.871 25.4864 23.4923 23.0257 23.3997 19.8267H26.458C26.5816 21.6415 27.6937 23.0564 30.6284 23.0564C33.2852 23.0564 33.9957 21.8876 33.9957 20.7495C33.9957 18.7809 31.895 18.5656 29.8561 18.135C27.1067 17.489 23.9557 16.6893 23.9557 13.4289C23.9557 10.7221 26.1491 8.90728 29.9488 8.90728C34.2737 8.90728 36.3435 11.2142 36.5597 13.921H33.5014C33.2852 12.7214 32.6364 11.3372 30.0106 11.3372C27.9717 11.3372 27.1067 12.137 27.1067 13.3058C27.1067 14.936 28.8676 15.0898 31.0918 15.582C33.9957 16.2587 37.1467 17.0892 37.1467 20.5957C37.1467 23.6408 34.7989 25.4864 30.6593 25.4864Z" fill="currentColor"></path><path d="M48.9871 14.9976C48.9871 12.906 48.5546 11.491 46.2377 11.491C43.9826 11.491 42.5615 13.0597 42.5615 15.4282V25.0558H39.5341V9.36867H42.5615V11.3372H42.6233C43.4574 10.1376 44.9093 8.90728 47.288 8.90728C49.4814 8.90728 50.8406 9.89157 51.4585 11.6448H51.5203C52.6633 10.1376 54.2697 8.90728 56.6793 8.90728C59.8612 8.90728 61.4676 10.8143 61.4676 14.1671V25.0558H58.4401V14.9976C58.4401 12.906 58.0076 11.491 55.6907 11.491C53.4356 11.491 52.0145 13.0597 52.0145 15.4282V25.0558H48.9871V14.9976Z" fill="currentColor"></path><path d="M71.8283 25.5171C66.9164 25.5171 63.9508 22.1337 63.9508 17.2122C63.9508 12.3215 66.9164 8.87652 71.8592 8.87652C76.7401 8.87652 79.7058 12.2908 79.7058 17.1815C79.7058 22.1029 76.7402 25.5171 71.8283 25.5171ZM67.1018 17.2122C67.1018 20.4727 68.5846 23.0257 71.8592 23.0257C75.072 23.0257 76.5548 20.4727 76.5548 17.2122C76.5548 13.921 75.072 11.3988 71.8592 11.3988C68.5846 11.3988 67.1018 13.921 67.1018 17.2122Z" fill="currentColor"></path></svg>
      </a>
      <button data-navigation-toggle="toggle" data-hover="" class="centered-nav__toggle">
        <div class="centered-nav__toggle-bar"></div>
        <div class="centered-nav__toggle-bar"></div>
      </button>
    </div>
    <div class="centered-nav__content">
      <div class="centered-nav__inner">
        <ul class="centered-nav__ul">
          <div data-navigation-item="" class="centered-nav__li">
            <a href="#" class="hamburger-nav__a">
              <p class="hamburger-nav__p">Home</p>
            </a>
          </div>
          <div data-navigation-item="" class="centered-nav__li">
            <a href="#" class="hamburger-nav__a">
              <p class="hamburger-nav__p">Portfolio</p>
            </a>
          </div>
          <div data-navigation-item="" class="centered-nav__li">
            <a href="#" class="hamburger-nav__a">
              <p class="hamburger-nav__p">About us</p>
            </a>
          </div>
          <div data-navigation-item="" class="centered-nav__li">
            <a href="#" class="hamburger-nav__a">
              <p class="hamburger-nav__p">Our services</p>
            </a>
          </div>
          <div data-navigation-item="" class="centered-nav__li">
            <a href="#" class="hamburger-nav__a">
              <p class="hamburger-nav__p">Approach</p>
            </a>
          </div>
        </ul>
        <div data-navigation-item="" class="centered-nav__banner-w">
          <a href="#" class="centered-nav__banner w-inline-block">
            <div class="centered-nav__banner-row">
              <div data-css-marquee-list="" class="centered-nav__banner-item">
                <div class="centered-nav__banner-inner"><p class="centered-nav__banner-text">Contact us</p></div>
                <div class="centered-nav__banner-inner"><p class="centered-nav__banner-text">Contact us</p></div>
                <div class="centered-nav__banner-inner"><p class="centered-nav__banner-text">Contact us</p></div>
                <div class="centered-nav__banner-inner"><p class="centered-nav__banner-text">Contact us</p></div>
                <div class="centered-nav__banner-inner"><p class="centered-nav__banner-text">Contact us</p></div>
              </div>
              <div data-css-marquee-list="" class="centered-nav__banner-item">
                <div class="centered-nav__banner-inner"><p class="centered-nav__banner-text">Contact us</p></div>
                <div class="centered-nav__banner-inner"><p class="centered-nav__banner-text">Contact us</p></div>
                <div class="centered-nav__banner-inner"><p class="centered-nav__banner-text">Contact us</p></div>
                <div class="centered-nav__banner-inner"><p class="centered-nav__banner-text">Contact us</p></div>
                <div class="centered-nav__banner-inner"><p class="centered-nav__banner-text">Contact us</p></div>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>

HTML structure is not required for this resource.

Step 2: Add CSS

CSS

Copy

.navigation {
  z-index: 500;
  pointer-events: none;
  position: fixed;
  inset: 0;
}

.navigation__dark-bg {
  opacity: 0;
  pointer-events: auto;
  visibility: hidden;
  background-color: #000;
  position: absolute;
  inset: 0;
}

.navigation__dark-bg {
  transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1);
}

[data-navigation-status="active"] .navigation__dark-bg {
  opacity: 0.15;
  visibility: visible;
}

.centered-nav {
  border-radius: .75em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 30em;
  display: flex;
  position: absolute;
  top: 2em;
  left: 50%;
  transform: translate(-50%);
}

.centered-nav__bg {
  background-color: #fff;
  border-radius: .75em;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.centered-nav__header {
  z-index: 1;
  justify-content: space-between;
  align-items: center;
  padding: 1.25em 1.5em 1.25em 1.625em;
  display: flex;
  position: relative;
}

.centered-nav__logo {
  pointer-events: auto;
  color: #131313;
  justify-content: center;
  align-items: center;
  width: 7.5em;
  display: flex;
}

.centered-nav__logo-svg {
  width: 100%;
  height: 100%;
}

.centered-nav__toggle {
  pointer-events: auto;
  cursor: pointer;
  background-color: #0000;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  padding: 0;
  display: flex;
  position: relative;
}

.centered-nav__toggle .centered-nav__toggle-bar {
  background-color: #131313;
  width: 1.875em;
  height: .125em;
  position: absolute;
  transition: transform 0.6s cubic-bezier(.65, 0, 0, 1);
  transform: translateY(-0.25em) rotate(0.001deg);
}

.centered-nav__toggle:hover .centered-nav__toggle-bar {
  transform: translateY(0.25em) rotate(0.001deg);
}

.centered-nav__toggle .centered-nav__toggle-bar:nth-child(2) {
  transform: translateY(0.15em) rotate(0.001deg);
}

.centered-nav__toggle:hover .centered-nav__toggle-bar:nth-child(2) {
  transform: translateY(-0.15em) rotate(0.001deg);
}

[data-navigation-status="active"] .centered-nav__toggle .centered-nav__toggle-bar {
  transform: translateY(0em) rotate(45deg);
}

[data-navigation-status="active"] .centered-nav__toggle .centered-nav__toggle-bar:nth-child(2) {
  transform: translateY(0em) rotate(-45deg);
}

.centered-nav__content {
  border-bottom-right-radius: .75em;
  border-bottom-left-radius: .75em;
  grid-template-rows: 0fr;
  display: grid;
  position: relative;
  overflow: hidden;
  transition: grid-template-rows 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-navigation-status="active"] .centered-nav__content {
  grid-template-rows: 1fr;
}

.centered-nav__inner {
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  pointer-events: auto;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 10000%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.centered-nav__ul {
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  display: flex;
  position: relative;
}

.centered-nav__li {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: clip;
}

.hamburger-nav__a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.2;
  transition-delay: inherit;
  transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(.65, 0, 0, 1);
}

[data-navigation-status="active"] .hamburger-nav__a::after {
  transform: scaleX(1);
}

.hamburger-nav__a:hover::after {
  opacity: 0.4;
}

.hamburger-nav__a[aria-current]::after {
  opacity: 1;
}

.hamburger-nav__p {
  transition: transform 0.6s cubic-bezier(.65, 0, 0, 1);
  transform: translate(0px, 150%);
  transition-delay: inherit;
}

[data-navigation-status="active"] .hamburger-nav__p {
  transform: translate(0px, 0%);
}

.centered-nav__banner-w {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.centered-nav__banner {
  color: #fff;
  background-color: #ff4c24;
  max-width: 100%;
  padding-top: 1em;
  padding-bottom: 1em;
  text-decoration: none;
  transition: background-color .15s;
  overflow: hidden;
}

.centered-nav__banner:hover {
  background-color: #ff4c24e6;
}

.centered-nav__banner-row {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.centered-nav__banner-item {
  flex: none;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.centered-nav__banner-inner {
  flex: none;
  justify-content: flex-start;
  align-items: center;
  padding-right: 2em;
  display: flex;
}

.centered-nav__banner-text {
  text-transform: uppercase;
  margin-bottom: 0;
  font-family: RM Mono, Arial, sans-serif;
  font-size: .875em;
  font-weight: 400;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .centered-nav {
    width: auto;
    top: 1em;
    left: 1em;
    right: 1em;
    transform: none;
  }
}

@keyframes translateX {
  to {
    transform: translateX(-100%);
  }
}

[data-css-marquee-list] {
  animation: translateX 20s linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

[data-navigation-status="active"] [data-css-marquee-list] {
  animation-play-state: running;
}

[data-navigation-status="active"] .centered-nav__banner:hover [data-css-marquee-list] {
  animation-play-state: paused;
}

Step 2: Add custom Javascript

Step 2: Add Javascript

Step 3: Add Javascript

Javascript

Copy

function initCenteredScalingNavigationBar() {
  const navigationInnerItems = document.querySelectorAll("[data-navigation-item]")
  
  // Apply CSS transition delay
  navigationInnerItems.forEach((item, index)=> {
      item.style.transitionDelay = `${index * 0.05}s`;
  });
  
  // Toggle Navigation
  document.querySelectorAll('[data-navigation-toggle="toggle"]').forEach(toggleBtn => {
    toggleBtn.addEventListener('click', () => {
      const navStatusEl = document.querySelector('[data-navigation-status]');
      if (!navStatusEl) return;
      if (navStatusEl.getAttribute('data-navigation-status') === 'not-active') {
        navStatusEl.setAttribute('data-navigation-status', 'active');
        // If you use Lenis you can 'stop' Lenis here: Example Lenis.stop();
      } else {
        navStatusEl.setAttribute('data-navigation-status', 'not-active');
        // If you use Lenis you can 'start' Lenis here: Example Lenis.start();
      }
    });
  });

  // Close Navigation
  document.querySelectorAll('[data-navigation-toggle="close"]').forEach(closeBtn => {
    closeBtn.addEventListener('click', () => {
      const navStatusEl = document.querySelector('[data-navigation-status]');
      if (!navStatusEl) return;
      navStatusEl.setAttribute('data-navigation-status', 'not-active');
      // If you use Lenis you can 'start' Lenis here: Example Lenis.start();
    });
  });

  // Key ESC - Close Navigation
  document.addEventListener('keydown', e => {
    if (e.keyCode === 27) {
      const navStatusEl = document.querySelector('[data-navigation-status]');
      if (!navStatusEl) return;
      if (navStatusEl.getAttribute('data-navigation-status') === 'active') {
        navStatusEl.setAttribute('data-navigation-status', 'not-active');
       // If you use Lenis you can 'start' Lenis here: Example Lenis.start();
      }
    }
  });
}

// Initialize Centered Scaling Navigation Bar
document.addEventListener('DOMContentLoaded', function() {
  initCenteredScalingNavigationBar();
});

Step 3: Add custom CSS

Step 2: Add custom CSS

CSS

Copy

/* Nav Dark BG */
.navigation__dark-bg {
  transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1);
}
[data-navigation-status="active"] .navigation__dark-bg {
  opacity: 0.15;
  visibility: visible;
}

/* Show/Hide content */
.centered-nav__content {
  transition: grid-template-rows 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}
[data-navigation-status="active"] .centered-nav__content {
  grid-template-rows: 1fr;
}

/* Nav content animation (menu items) */
[data-navigation-item] {
  transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  opacity: 0;
  transform: translate(0px, 2em);
}
[data-navigation-status="active"] [data-navigation-item] {
  opacity: 1;
  transform: translate(0px, 0em);
}

/* Link underline */
.hamburger-nav__a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.2;
  transition-delay: inherit;
  transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(.65, 0, 0, 1);
}
[data-navigation-status="active"] .hamburger-nav__a::after {
  transform: scaleX(1);
}
.hamburger-nav__a:hover::after {
  opacity: 0.4;
}

/* Link text slide */
.hamburger-nav__p {
  transition: transform 0.6s cubic-bezier(.65, 0, 0, 1);
  transform: translate(0px, 150%);
  transition-delay: inherit;
}
[data-navigation-status="active"] .hamburger-nav__p {
  transform: translate(0px, 0%);
}

/* Active Link underline */
.hamburger-nav__a[aria-current]::after {
  opacity: 1;
}

/* Hamburger Button animation */
.centered-nav__toggle .centered-nav__toggle-bar {
  transition: transform 0.6s cubic-bezier(.65, 0, 0, 1);
  transform: translateY(-0.25em) rotate(0.001deg);
}
.centered-nav__toggle:hover .centered-nav__toggle-bar {
  transform: translateY(0.25em) rotate(0.001deg);
}
.centered-nav__toggle .centered-nav__toggle-bar:nth-child(2) {
  transform: translateY(0.15em) rotate(0.001deg);
}
.centered-nav__toggle:hover .centered-nav__toggle-bar:nth-child(2) {
  transform: translateY(-0.15em) rotate(0.001deg);
}
[data-navigation-status="active"] .centered-nav__toggle .centered-nav__toggle-bar {
  transform: translateY(0em) rotate(45deg);
}
[data-navigation-status="active"] .centered-nav__toggle .centered-nav__toggle-bar:nth-child(2) {
  transform: translateY(0em) rotate(-45deg);
}

/* CTA Banner marquee */
@keyframes translateX {
  to {
    transform: translateX(-100%);
  }
}
[data-css-marquee-list] {
  animation: translateX 20s linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
[data-navigation-status="active"] [data-css-marquee-list] {
  animation-play-state: running;
}
[data-navigation-status="active"] .centered-nav__banner:hover [data-css-marquee-list] {
  animation-play-state: paused;
}

Implementation

Navigation Status

In this resource, we apply the [data-navigation-status="not-active"] attribute to the <nav> element. However, you can also place it on the <body> if you want to target all child elements on the page.

Open/Close Navigation

Use [data-navigation-toggle="toggle"] attribute to toggle the status active/not-active
Use [data-navigation-toggle="close"] attribute to set the status not-active

Live Preview

Resource Details

Last updated
May 5, 2025
Type
The Vault
Category
Navigation
Need help?
Join Slack

Scaling

Navigation

CSS

Stagger

Transform

Original source

Ilja van Eck

Centered Scaling Navigation Bar

Documentation

External Scripts in Webflow

Copy structure to Webflow

Custom Javascript in Webflow

Custom CSS in Webflow

Implementation

Navigation Status

Open/Close Navigation

Creator Credits

Welcome to the Vault 👋

Upgrade to lifetime

Osmo Slack Community

Need help?

Centered Scaling Navigation Bar

Documentation

External Scripts in Webflow

Copy structure to Webflow

Custom Javascript in Webflow

Custom CSS in Webflow

Implementation

Navigation Status

Open/Close Navigation

Creator Credits