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 === */