Jump to content

Header CTA hover state hamburger menu open

Recommended Posts

Posted (edited)

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{
.header-nav, {
.header--menu-open .header-menu {
opacity: .99; visibility: visible;}
.header .header-burger{

// 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;


Bildschirmfoto 2024-06-01 um 14.21.48.png

Edited by DavidHernandez
forgot the url
Link to comment
  • 2 weeks later...

@DavidHernandez To change the header CTA hover button text color when the hamburger menu is open, add this code under Website > Pages > Website Tools > Custom CSS.

#header .header-actions-action .sqs-button-element--primary:hover {
    color: #313532 !important;


If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.