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

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.

Thanks @squareology -- this seems to have worked. But how do you then make the logo clickable to return to main menu from elsewhere on the site?

Did you guys get anywhere with this? I've tried using suggestions in a few of the forums here without any luck.

Any success with this? I'm having the same problem, and so far none of the solutions in any of the other forums have helped.

Thanks!

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 }

@evbro - I'm confused about what the logo image url would be? I have a logo, but it's a jpg file. Thanks!

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.

Any idea how to resize the logo image? I got it to show up but it’s giant.

Any idea how to resize the logo image? I got it to show up but it’s giant.

Upload the image at the size/resolution you'd like it to display on your site.

There may be a command to resize, but I'd recommend just using a smaller image. Better for load times anyway.

@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?

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!!

@evbro - thanks, I'll try that!

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

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

I don't think that's possible, because these workarounds use the logo as a background image. There isn't a way to make a background image clickable.

Hi @Kjerstin I've never found a way to make the logo clickable so I reverted to the default. It's really unfortunate. If you ever find a method, please post back here.

Hi @Kjerstin I've never found a way to make the logo clickable so I reverted to the default. It's really unfortunate. If you ever find a method, please post back here.

It worked perfectly! Thanks @squareology and @octopus ! Any idea on how to make the logo clickable to redirect to the main menu?

Any way to make the logo clickable to redirect to home page?

Any way to make the logo clickable to redirect to home page?

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

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

This is great @octopus - it worked perfectly, thank you!