Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


evbro

Question

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 post
  • Answers 34
  • Created
  • Last Reply

Top Posters For This Question

Recommended Posts

  • 4

I would appreciate an answer to this as well -- My Five site on mobile replaces the logo with just a written out version of the Site Title. I'd love it to display the logo itself -- responsive in size.

Anybody? You'd be my hero.

Link to post
  • 0

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 post
  • 0

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 post
  • 0

@evbro - I used the code above and it worked great (thanks!) but now on mobile there's a huge space between the logo and header, any idea how to adjust the CSS to fix that?

Link to post
  • 0

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 post
  • 0
Guest

@deanseguinDid you find out how to make the logo clickable to return to main meny, on mobile view?

Link to post
  • 0
Guest

@deanseguinDid you find out how to make the logo clickable to return to main meny, on mobile view?

Link to post
  • 0

@Octopus, the above CSS and js works like a charm. I'd also add changing the max-width also helps to control the image size, in addition to the height. Thanks for posting.

Edited by abucknam
Initial Revision
Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...