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

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

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

Share this post


Link to post

Recommended Posts

  • 0

@deanseguin @ana@top5fashion.com

If you want to make it clickable, add this to your site footer injection:

Replace "YOUR URL HERE" with your URL


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$('#mobile-navigation-title').wrap('<a href="YOUR URL HERE" />');
</script>

I hope this helps! :)

Edited by njensen
Initial Revision

>Hello, I'm Nicole. > I'm new to Squarespace, still finding my way and I hope I can help other users along the way.

Share this post


Link to post
  • 0

i was able to get this code to work by updating the jQuery version.

Settings > Advanced > Code Injection > Footerand entered the following code:


  <script>
 $('#mobile-navigation-title').wrap('<a href="https://www.mytaxband.com/" />');



and i got the jQuery version from this Google Hosted Library page:https://developers.google.com/speed/libraries/

Share this post


Link to post
  • 0

Thanks @squareology :-) Is there a way in your code to use a larger logo/image and specify a smaller height/width to fit so that the logo doesn't look blurry?

Share this post


Link to post
  • 0

I got my mobile nav logo to show up like this, and it still acts as a link to the front page. You just have to add your logo image url(). By adjusting font-size you can adjust image size and bu adjusting label margins you can adjust hamburger menu position. Usage of PNG images with transparent background is suggested of course.

/*Add logo to display in mobile*/
#mobile-navigation-title a {
  color: transparent;
  background-image: url("YOUR_IMAGE_URL_HERE");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 2.5em;
}
/*Adjust mobile hamburgernav position*/
#mobile-navigation-label {
  margin-top: 1em;
}

 

Edited by osholopa

Share this post


Link to post
  • -1

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

Share this post


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