Navbar items hover color

If you’d like to set a custom hover color for menu items or CTA buttons in the navbar, we’ve got a solution for you in the form of a CSS snippet.

We’ve prepared two separate versions of the code - one for the light theme and one for the dark theme, in case you use theme switching on your website.

Simply paste the code into the CSS section under Custom Code in your dashboard.
If you have theme switching enabled on your site, paste both codes.
You can change the HEX color for:

Menu items

CTA button text

CTA button background

Light theme:

/* === NAVBAR HOVER COLOR - LIGHT THEME === */

/* Menu items */
html.theme-light .super-navbar__item,
html.theme-light .super-navbar__button {
  transition: color 0.2s ease;
}

html.theme-light .super-navbar__item:hover,
html.theme-light .super-navbar__button:hover {
  color: #ff6600; /* change items color */
}

/* CTA */
html.theme-light .super-navbar__cta {
  transition: color 0.2s ease, background-color 0.2s ease;
}

html.theme-light .super-navbar__cta:hover {
  color: #ffffff; /* change CTA text color */
  background-color: #ff6600; /* change CTA bg color */
}

/* === END OF NAVBAR HOVER COLOR - LIGHT THEME === */

Dark theme:

/* === NAVBAR HOVER COLOR - DARK THEME === */

/* Menu items */
html.theme-dark .super-navbar__item,
html.theme-dark .super-navbar__button {
  transition: color 0.2s ease;
}

html.theme-dark .super-navbar__item:hover,
html.theme-dark .super-navbar__button:hover {
  color: #f3dd18; /* change items color */
}

/* CTA */
html.theme-dark .super-navbar__cta {
  transition: color 0.2s ease, background-color 0.2s ease;
}

html.theme-dark .super-navbar__cta:hover {
  color: #000000; /* change CTA text color */
  background-color: #f3dd18; /* change CTA bg color */
}

/* === END OF NAVBAR HOVER COLOR - DARK THEME === */