Second / different logo for mobile display

Hello, I am using the Supply template and would like to make a horizontal version of our logo display when the site goes to mobile sizing. Currently the logo disappears and disply the site title. Here is our sites temp page:

https://richard-galdieri.squarespace.com/config#/|/home-1

Any ideas?

Hi, thanks for this, however is it possible to add a section that will downscale the image properly? Right now I have to resize the logo to the pixel size that will fit inside the bar, and even when I get it right the logo is very low resolution (obviously) and takes away from the crisp look on mobile. Anything would be appreciated. thanks!

Hey Nichez,

I'm working in a Bedford template, and I have a horizontal and a more compact version of our logo (both are image files). I added the horizontal version in Logo & Title, and uploaded the second to Pages as a link in the Not Linked section. And then this is how I did it:

1. Open your website with normal desktop browser width, i.e. wider than 640px.
2. Right click on the logo, then click on Inspect Element. Now your browser should be split into two sections. Your website should be on the left, and an Inspect Element window on the right with two sub-windows: one with html code in it, the other with CSS code in it. The former is under an Elements tab, the latter under the Styles tab. Make sure to have your website bit still wider than 640px.
3. Just to be on the safe side, click on the element selection tool in the upper left corner of the Inspect Element window. [it's an arrow over a box.] Now click on your logo.
4. In the Inspect Element window you should see an html bit highlighted (this was most likely highlighted to begin with). Mine starts like this:
5. Now start decreasing the width of your browser window and keep an eye on the top of your Styles section. The top of your Styles tab should change as you reach a width smaller than 640px. Mine changes from

   #logoImage img {...

   to

   @media only screen and (max-width: 640px)...

6. Double click just below the

   @media

   line, and copy the highlighted bit. Paste it in a Word or Notepad document temporarily. Mine looks like this:

   #logoWrapper #logoImage img, #siteTitleWrapper #logoImage img

7. Now go to your Custom CSS section in Squarespace Design and insert the following:

   @media screen and (max-width: 640px) {   insert_copy_here {content: url("image_url_goes_here") !important;}}

   Now insert the bit from Word/Notepad to where I say insert_copy_here and insert your secondary logo's url where I say image_url_goes_here.

8. So you should have something like this:

   @media screen and (max-width: 640px) { #logoWrapper #logoImage img, #siteTitleWrapper #logoImage img {content: url("https://static1.squarespace.com/static/561590ffe4b042d6d89b13f0...") !important;}}

9. This should do it. You can add additional CSS right after the

   !important } }

   bit. I added

   min-height: 80px;

   for instance.

Hope this helps.