Jump to content

Changing Logo on Mobile Overlay (NOT the mobile page itself)

Recommended Posts

Site URL: https://newconductorsorch.squarespace.com/faq

PW: newconductors

The gist of the question: I currently have a white logo that disappears on a white mobile overlay background. I would like the mobile overlay to have a completely different logo. 

This page (FAQ) has color logo, but I've used the SquareKicker extension to use a filter to make it white. My "solution" for the mobile overlay is to use a completely different logo-- for ALL pages! [SquareKicker is not able to help me.]

I have injected this into my header to try to replace the logo for mobile overlay across ALL pages. 

I would appreciate any advice or solutions you could give! 

  /* hide current image */
body:not(.header--menu-open) .header-title-logo img {
    visibility: hidden!important;
  /* set new image on burger menu click */
  body:not(.header--menu-open) .header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/61e9e0a1c56e13742a1a45a4/t/622017f14c29f83be16f38e8/1646270449115/Submark+Black.png)!important;
    background-size: cover!important;
    background-repeat: no-repeat!important;


Edited by AudeyTheConductor
not clear title
Link to comment
  • AudeyTheConductor changed the title to Changing Logo on Mobile Overlay (NOT the mobile page itself)
  • Replies 0
  • Views 173
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

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.