Jump to content

Custom header logo from desktop version does not show on mobile version

Recommended Posts

hi,

i currently have different colored header logo images for different pages using the code for each page:

 

<style>
.header-title-logo a {
  content: url("https://static1.squarespace.com/static/6179e301282d777ca075f46a/t/61df592ef5f3f23010c205f1/1642027311119/logo-name.png");
  }
</style>

 

but the different colored images do not show up on mobile and instead use the default header logo. do i need additional code to use the same image for both the desktop and mobile versions?

Link to comment

I can't remember if you need a different selector or not. Try this first.

<style>
.header-title-logo a {
  content: url("https://static1.squarespace.com/static/6179e301282d777ca075f46a/t/61df592ef5f3f23010c205f1/1642027311119/logo-name.png");
  }
@media screen and (max-width:768px) {
  .header-title-logo a {
  	content: url("https://static1.squarespace.com/static/6179e301282d777ca075f46a/t/61df592ef5f3f23010c205f1/1642027311119/logo-name.png");
  	}
  }
</style> 

If that doesn't work, be sure to share a link to your site.

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.