Jump to content

Change logo on mobile overlay menu

Recommended Posts

Due to the colours of the logo and the backgrounds on each page, my website requires different version of my logo on some pages than others. The most challenging part appears to be on mobile, when you enter the overlay menu, the background is white, so I need to use a black version of my logo rather than the white version used on most pages, including the homepage. How can I do this? I'm using the Colima template.

Link to comment
  • Replies 3
  • Views 973
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

  • 1 year later...

Hello, I'm looking for a solution for the same problem: I need to use a white version of the logo only on the mobile overlay menu, while the regular mobile logo stays the same as on desktop view.

Anyone can help?
website : pentanpl.squarespace.com
psw:  pentanpl

Thank you!

 

EDIT:

While I'd still like to show a specific logo onto that mobile menu overlay  (when mobile menu is open after click on), I found a code (attached below) that inverts the color of the logo on overlay menu. It could be an acceptable solution if no other solution pops up. 
Here's the code to invert the color, in case someone else needs it:

// invert logo color on mobile menu overlay only//
.header--menu-open 
{ 
  .header-title-logo {
    -webkit-filter: invert(100%);
     filter: invert(1);
            filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
}
// END invert logo color on mobile menu overlay only//

 

Edited by silviagrim
Link to comment

Try this code

body.header--menu-open .header-title-logo img {
    visibility: hidden
}

body.header--menu-open .header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/60c5476970fe8d18bb331890/t/616f0047d19d44108ddafbbb/1634664519505/Logo+Penta+NPL+negativo.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    max-height: unset
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.