Rav

Hey @tuanphan this code doesn't work for me. Can you please help? So I've got this code to display a different logo on the page in general... <style> div.header-title-logo a { content:url("https://static1.squarespace.com/static/5611841fe4b0f085582f2aa7/t/5ddc2f3f2e5a7339b69c08b2/1578936481584/?format=1500w") !important; max-width: 290px; /* if logo needs to be centered */ margin-left: auto; margin-right: auto; } </style> But using your code in this post, it doesn't hide that logo when the menu overlay is open. It overlaps the both of them on top of each other. <style> /* hide current image */ .header-title-logo img { visibility: hidden; } /* set new image on burger menu click */ body.header--menu-open .header-title-logo a { background-image: url(https://static1.squarespace.com/static/5e8a138dedf9386b7757061f/t/5fc8e19e90a4f8549d839be0/1607000480214/%5BSITE%5D+%23FF_MASTER-LOGO_WHITE.png); background-size: cover; background-repeat: no-repeat; } </style> See screenshot...