7TK Posted July 19, 2022 Share Posted July 19, 2022 (edited) Site URL: https://www.tinanairpics.com/contact Hello, 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): <style> a.icon-hamburger::before { -webkit-filter: invert(100%); filter: invert(100%); } </style> 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! 🙂 Edited July 19, 2022 by 7TK Link to comment
creedon Posted July 19, 2022 Share Posted July 19, 2022 Replace, make a copy somewhere, your CSS with the following. <style> 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, h1.logo.logo-image, h2.logo-subtitle, nav.main-nav { -webkit-filter : invert( 100% ); filter : invert( 100% ); } .sqs-mobile-nav-open .ctrl-button .icon-hamburger:before { -webkit-filter : unset; filter : unset; } form, p { color : #fff8dc; } </style> This is for v7.0 using the Forte template and specific to the poster's need. Let us know how it goes. 7TK 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
7TK Posted July 20, 2022 Author Share Posted July 20, 2022 Wow - this worked immediately! Thank you SOOOOO much, creedon! 😀 creedon 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment