Jump to content

SVG logo set but want a different logo on mobile overlay

By theuq, in Customize with code

Go to solution Solved by tuanphan,

Recommended Posts

theuq Level 5

theuq

Posted
Posted

Hey Everyone!

Thanks to these forums and Google, I've been able to set up the SVG logo which is working fine on desktop and mobile. But I'd also like to have another logo with a very small variation on mobile overlay (when you click the burger menu).

Current CSS on the website:

/* Hide the normal logo */
.header-title-logo img, .header-mobile-logo img {
  visibility: hidden !important;
}

/* Set background image to be the SVG logo */
.header-title-logo a, .header-mobile-logo a{
  /* Change the "left" below to "center" or "right" if you want the logo positioned in the middle or on the right */
  background: url(https://www.dataterminus.com/s/bold-wb-cropped.svg) no-repeat left !important;
  background-size: contain !important;
}

Link to comment
  • Replies 2
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan
tuanphan

Remove your code & use this new code /* change header logo */ header#header img { content: url(https://www.dataterminus.com/s/bold-wb-cropped.svg); } /* change header logo when burger menu is

  • Solution
tuanphan Level 18

tuanphan

Posted
  • Solution
Posted

Remove your code & use this new code 

/* change header logo */
header#header img {
	content: url(https://www.dataterminus.com/s/bold-wb-cropped.svg);
}
/* change header logo when burger menu is open */
body.header--menu-open header#header img {
	content: url(add new svg logo url here);
}

Remember to change url in second code

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources