Jump to content

Second / different logo for mobile display

Recommended Posts

  • 7 months later...
  • Replies 2
  • Views 10.6k
  • Created
  • Last Reply

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!

Link to comment
  • 2 months later...

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: alt text
  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 {...


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

  6. Double click just below the

    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.


Link to comment


This topic is now archived and is closed to further replies.

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