DavidHernandez

https://raspberry-apple-wwrg.squarespace.com

The client wants to use a mobile Hamburger Menu on Desktop view with a CTA Button next to the Menu icon. As the navigation is toggled the CTA changes color which is cool, however when hovering over it the font color is the same as the background and no longer visible. How can I target the color of the text on the open menu only? Thanks! This is the custom code I have added: // Burger .header .header-burger{ display:flex} .header-nav, { display:none} .header--menu-open .header-menu { opacity: .99; visibility: visible;} .header .header-burger{ display:flex} // burger menu thickness .top-bun, .patty, .bottom-bun { height: 2px !important; border-radius: 5px;} // CTA Color .header-actions .btn { background: var(--primaryButtonBackgroundColor)!important; color: var(--primaryButtonTextColor)!important; } // CTA Hover .header-actions .btn:hover { background: none!important; color: var(--secondaryButtonTextColor)!important;} // CTA padding .header-actions { padding-right: 25px; list-style: none!important; } // CTA Menu open @media screen and (min-width: 768px) { .header-menu-cta {display: none;} } @media only screen and (min-width:768px) {.header-menu-nav-item a, .header-menu-actions.language-picker.language-picker-mobile { font-size: 3vmax; }}

Hi! I want to add the text highlight freehand slash as hover state to my main nav .header-nav a:hover when I inspect the highlight added elsewhere in the text through the squarespace function I can see it looks like this <span class="sqsrte-text-highlight" data-text-attribute-id="84e2725c-a9c4-4b63-8023-973a37757fdb">Programme</span How can I achieve the desired hover effect as seen in the mockup? Thanks!!