To reverse your logo when the Mega Menu is open, you need to do 2 things. First, upload your reversed logo (this can be done in the Custom CSS » Custom Files area). Second, apply this new logo to specific color themes, using the below as a general structure.
/* Reverse Logo on Mega Menu */
#header[data-section-theme="color-theme-here"] .header-title-logo img{
content:url(your-reverse-logo.png)
}As an example, this would flip my logo when the “Lightest 1” color theme is applied:
/* Reverse Logo on Mega Menu */
#header[data-section-theme="white"] .header-title-logo img{
content:url(https://static1.squarespace.com/static/66a5509a26f0ce3a9e138e4c/t/670062f46448082550b19899/1728078580039/Logo.png)
}The white from above is what is targeting my Lightest 1 color theme. See the chart below for additional options.
| Color Theme | Target |
|---|---|
| Lightest 1 | white |
| Lightest 2 | white-bold |
| Light 1 | light |
| Light 2 | light-bold |
| Bright 1 | bright |
| Bright 2 | bright-inverse |
| Dark 1 | dark |
| Dark 2 | dark-bold |
| Darkest 1 | black |
| Darkest 2 | black-bold |