Jump to content

BRINE - Logo on mobile, but not on Desktop?

Recommended Posts

Guest FuriousWhisk

Hey there, pardon if this question has already been asked before.

I'm wondering if it's possible to have a site which uses the Brine template configured to use a logo when being viewed at mobile or tablet resolutions, and the regular site title be used if the site is being viewed from the desktop.

The logo for the site I'm working on is effectively a square. It's great for mobile views, but gets a bit small in the desktop view. I've tried increasing it size-wise, but that only makes it dwarf the other items in the header. The site title is too long to use in mobile view: it gets all bunched up and crowds the other header items, even when they're compressed for mobile.

Is it possible to have this configuration in Brine, or in any Squarespace template for that matter? Or am I better off trying to create a logo that's wider than it is tall, and therefore scales better?

Link to comment
  • Replies 4
  • Created
  • Last Reply

Yes. You can use logo on mobile, and site title for desktop, with some custom code. You should share site url to check code. @FuriousWhisk

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

@abibacon Add to Home > Design > Custom CSS

a.Mobile-bar-branding {
    visibility: hidden;
}
a.Mobile-bar-branding:before {
    visibility: visible;
    content: "";
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/brine-demo-squarespace-com-1689x1080-500w.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 200px;
    height: 50px;
    display: inline-block;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...
On 11/4/2019 at 10:37 AM, tuanphan said:

@abibacon Add to Home > Design > Custom CSS


a.Mobile-bar-branding {
    visibility: hidden;
}
a.Mobile-bar-branding:before {
    visibility: visible;
    content: "";
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/brine-demo-squarespace-com-1689x1080-500w.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 200px;
    height: 50px;
    display: inline-block;
}

 

Is there a way of doing this for tablet too? 

Thanks in advance!

Squarespace Developer based in Hampshire, England

If you'd like to make a contribution for my time you can Buy Me A Coffee.

Link to comment

Archived

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.