Change Logo & Hamburger Color in Overlay Menu

We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this workaround.

Some may wish for the logo, navbar background, and hamburger icon to be a different color when the overlay menu is triggered. You can use this hack to do so.

Note: the logo color change will ONLY work if your logo is set to inline SVG code. For more on how to do this, view our navigation bar article page for how to do this.

Place the following CSS under Customize > Advanced > Custom CSS:

/* Navbar background color fade-in */
@keyframes navbar-background-fade-in {
  from {background-color: #000;}
  to {background-color: #FFF;}
}

/* Navbar items color fade-in */
@keyframes navbar-item-fade-in {
  from {background-color: #FFF; fill: #FFF; }
  to {background-color: #000; fill: #000;}
}

/* Overlay color changes */
#overlay-menu .logo svg path {
  animation-name: navbar-item-fade-in;
  animation-duration: 0.25s;
  animation-fill-mode: forwards;
}
  
#overlay-menu .close-menu span:before, #overlay-menu .close-menu span:after {
  animation-name: navbar-item-fade-in;
  animation-duration: 0.25s;
  animation-fill-mode: forwards;
}

#overlay-menu .semplice-navbar {
  animation-name: navbar-background-fade-in;
  animation-duration: 0.25s;
  animation-fill-mode: forwards;
}

You can then adjust the animation timing values and colors above to suite your needs, as well as replace the colors with your own HEX color values. 

That's it!