Jump to content

Need to change hamburger icon colour after it's clicked

Recommended Posts

Site URL: https://www.tinanairpics.com/contact


I'm trying to figure out how to make a mobile-view hamburger icon change from white to black on a particular page of a website.

I've currently injected the following code into that particular page's header, to make the hamburger appear white on the pre-clicked version, as the page background itself is dark (unlike the rest of the pages on the site):

a.icon-hamburger::before {
    -webkit-filter: invert(100%);
    filter: invert(100%);

That works fine, but once I click on the hamburger icon to see the menu listing, the hamburger itself becomes barely visible as it stays white, while the menu background also becomes white.

I've attached screenshots of the before and after.

The template is forte, Squarespace 7.0.

Thanks in advance to anyone who can help! 🙂


Screen Shot 2022-07-19 at 12.45.29 PM.png

Screen Shot 2022-07-19 at 12.56.11 PM.png

Edited by 7TK
Link to comment

Replace, make a copy somewhere, your CSS with the following.


  div#canvasWrapper {
    background-image : url( https://static1.squarespace.com/static/53514fd4e4b095a1b0b3a6bb/t/62d56f6fb8e3714244383a66/1658154863809/Dark+Green-2.png );
    background-position : center center;
    background-size : cover;
    background-repeat : no-repeat;
  .ctrl-button .icon-hamburger:before,
      -webkit-filter : invert( 100% );
      filter : invert( 100% );
  .sqs-mobile-nav-open .ctrl-button .icon-hamburger:before {
    -webkit-filter : unset;
    filter : unset;
      color : #fff8dc;

This is for v7.0 using the Forte template and specific to the poster's need.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.