TimRaudies

Hi bangank36, thanks for your reply! Just inverting the logo doesn't really fit my branding, I would prefer to make it "all-white". I found this squarespace website in another thread where it seems to work, so I am convinced there must be a way. Do you have any other idea?

Site URL: https://www.timraudies.com Hi everyone, I am trying to customise the logos on my website. The default logo for most pages is "red-icon-black-font". Because I am using a full sized picture on my homepage, I successfully replaced the logo there with "red-icon-white-font", using some CSS lines. For my mobile menu however, I would like to use a third "all-white" logo, whenever the menu is opened. I found the following code in another thread, but it seems to not work for me. Maybe someone has a solution? /**replace logo in mobile menu**/ .header—menu-open .header-mobile-logo img { visibility: hidden !important; } .header—menu-open .header-mobile-logo:after { content: ''; width: 100%; height: 100%; background-image: url('https://static1.squarespace.com/static/61f81bdfc5909b6ad3e084ce/t/63333d57b35dd064286fbcee/1664302423701/logo-tr-final-white.png') !important; background-size: contain; background-repeat: no-repeat; background-position: center; visibility: visible; position: absolute; left: 0; } /**replace logo on homepage desktop**/ @media screen and (min-width:767px) { #collection-6331b66e66d8af27cebe0f08 .header-title-logo img { content: url(//static1.squarespace.com/static/61f81bdfc5909b6ad3e084ce/t/63332b44e77981111958151c/1664297798409/logo-tr-final-inverted-xl.png) !important; max-height:inherit !important; } } /**replace logo on homepage mobile**/ @media screen and (max-width:767px) { #collection-6331b66e66d8af27cebe0f08 .header-display-mobile .header-title-logo img { content: url("//static1.squarespace.com/static/61f81bdfc5909b6ad3e084ce/t/63332b44e77981111958151c/1664297798409/logo-tr-final-inverted-xl.png") !important; max-height:inherit !important; } } Thanks for any idea.

Hi, I am trying to achieve a similar result on my website, but the code you provided does not work for me. I already have a different logo on my homepage (for desktop and mobile), but would like to set a third all-white logo whenever my mobile menu is opened. What am I missing here? /**replace logo in mobile menu**/ .header—menu-open .header-mobile-logo img { visibility: hidden !important; } .header—menu-open .header-mobile-logo:after { content: ''; width: 100%; height: 100%; background-image: url('https://static1.squarespace.com/static/61f81bdfc5909b6ad3e084ce/t/63333d57b35dd064286fbcee/1664302423701/logo-tr-final-white.png') !important; background-size: contain; background-repeat: no-repeat; background-position: center; visibility: visible; position: absolute; left: 0; } /**replace logo on homepage desktop**/ @media screen and (min-width:767px) { #collection-6331b66e66d8af27cebe0f08 .header-title-logo img { content: url(//static1.squarespace.com/static/61f81bdfc5909b6ad3e084ce/t/63332b44e77981111958151c/1664297798409/logo-tr-final-inverted-xl.png) !important; max-height:inherit !important; } } /**replace logo on homepage mobile**/ @media screen and (max-width:767px) { #collection-6331b66e66d8af27cebe0f08 .header-display-mobile .header-title-logo img { content: url("//static1.squarespace.com/static/61f81bdfc5909b6ad3e084ce/t/63332b44e77981111958151c/1664297798409/logo-tr-final-inverted-xl.png") !important; max-height:inherit !important; } } www.timraudies.com Thanks!