Jump to content

SVG logo set but want a different logo on mobile overlay

Go to solution Solved by tuanphan,

Recommended Posts

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
  • Solution

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

  • 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.