evbro Posted March 11, 2015 Share Posted March 11, 2015 (edited) 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 August 10, 2016 by TreyT Amistad, Scoobie and deactivated_user1 3 Link to comment
Alece Posted April 12, 2015 Share Posted April 12, 2015 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 comment
deanseguin Posted May 8, 2015 Share Posted May 8, 2015 Did you guys get anywhere with this? I've tried using suggestions in a few of the forums here without any luck. Link to comment
ktmade Posted June 16, 2015 Share Posted June 16, 2015 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! Link to comment
evbro Posted June 21, 2015 Author Share Posted June 21, 2015 (edited) 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 June 21, 2015 by evbro Link to comment
ktmade Posted June 21, 2015 Share Posted June 21, 2015 @evbro - I'm confused about what the logo image url would be? I have a logo, but it's a jpg file. Thanks! Link to comment
evbro Posted June 21, 2015 Author Share Posted June 21, 2015 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
squareology Posted July 20, 2015 Share Posted July 20, 2015 (edited) 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 July 20, 2015 by squareology Link to comment
deanseguin Posted July 21, 2015 Share Posted July 21, 2015 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? Link to comment
dsgnmate Posted August 6, 2015 Share Posted August 6, 2015 Any idea how to resize the logo image? I got it to show up but it’s giant. Link to comment
dsgnmate Posted August 6, 2015 Share Posted August 6, 2015 Any idea how to resize the logo image? I got it to show up but it’s giant. Link to comment
squareology Posted August 6, 2015 Share Posted August 6, 2015 Upload the image at the size/resolution you'd like it to display on your site. Link to comment
evbro Posted August 7, 2015 Author Share Posted August 7, 2015 There may be a command to resize, but I'd recommend just using a smaller image. Better for load times anyway. Link to comment
amdiz Posted August 19, 2015 Share Posted August 19, 2015 @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 comment
evbro Posted August 19, 2015 Author Share Posted August 19, 2015 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
amdiz Posted August 20, 2015 Share Posted August 20, 2015 @evbro - thanks, I'll try that! Link to comment
Guest Posted September 22, 2015 Share Posted September 22, 2015 @deanseguinDid you find out how to make the logo clickable to return to main meny, on mobile view? Link to comment
Guest Posted September 22, 2015 Share Posted September 22, 2015 @deanseguinDid you find out how to make the logo clickable to return to main meny, on mobile view? Link to comment
evbro Posted September 22, 2015 Author Share Posted September 22, 2015 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. Link to comment
deanseguin Posted September 25, 2015 Share Posted September 25, 2015 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. Link to comment
deanseguin Posted September 25, 2015 Share Posted September 25, 2015 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. Link to comment
ana@top5fashion.com Posted February 8, 2016 Share Posted February 8, 2016 (edited) It worked perfectly! Thanks @squareology and @octopus ! Any idea on how to make the logo clickable to redirect to the main menu? Edited February 8, 2016 by ana@top5fashion.com Initial Revision Link to comment
GetGoingDesign Posted February 8, 2016 Share Posted February 8, 2016 Any way to make the logo clickable to redirect to home page? Link to comment
GetGoingDesign Posted February 8, 2016 Share Posted February 8, 2016 Any way to make the logo clickable to redirect to home page? Link to comment
abucknam Posted April 18, 2016 Share Posted April 18, 2016 (edited) @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 April 18, 2016 by abucknam Initial Revision Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment