Jump to content

Five: How can I get logo to display in mobile view?

Recommended Posts

I found a couple similar questions on here, but the code in the answers didn't work at all for me. Is there any way for me to keep my logo displayed in the mobile version of the Five template? It kinda defeats the purpose of having a nice logo if everyone on mobile doesn't get to see it and instead just sees the page title text.

Please help! And thank you!!

Edited by TreyT
Link to comment
  • 1 month later...
  • Replies 40
  • Created
  • Last Reply

Top Posters In This Topic

  • 4 weeks later...
  • 1 month later...

It's not perfect, but I've had some success with this code. Hope it works for you all! I don't know enough to understand why this particular thing worked for me where other stuff didn't. I put this in the custom CSS area:


#mobile-navigation-title { display: none !important }
#mobile-navigation {   background-image: url(INSERT LOGO IMAGE URL HERE);   background-repeat: no-repeat;   background-position: center top;   min-height:60px }
#mobile-navigation.sqs-mobile-nav-open ul {   display: block;   margin-top: 40px }

Edited by evbro
Link to comment

The code needs to point to where the URL lives in order to insert it since you can't upload directly to the custom CSS. Since I'm assuming your logo is already on your site somewhere, just right click the image and open it in a new tab. You can copy the URL from there.

Link to comment
  • 5 weeks later...

Using @octopus' code with a couple tweaks:


#mobile-navigation-title {
     background: url("XXX") no-repeat center;
     text-indent: 100%;
     height:100px;
 }
#mobile-navigation #mobile-navigation-label {
     background:transparent;
     color:black;
}

You can adjust the mobile navigation button, it was showing up as a black square with grey lines but this way can be a transparent square with black lines. Add it to your Custom CSS Editor. You can upload files directly to the Custom CSS editor for use in the background URL, just replace XXX with the URL of the image file.

I also found that the height didn't expand with the image, so the height needs to be set manually. Use Device View to check how it looks.

Edited by squareology
Link to comment
  • 3 weeks later...
  • 2 weeks later...

Hmmm, I'm not exactly sure since I'm no CSS expert by any means, but maybe it has to do with the margin command? There's a margin-top command in the code I provided, so maybe you'd need to make a margin-bottom command or something. Wish I could be more helpful, good luck!!

Link to comment
  • 1 month later...
  • 4 months later...
  • 2 months later...

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.