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 comment
  • Answers 40
  • Created
  • Last Reply

Top Posters For This Question

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.

Link to comment
  • 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/

Link to comment
  • 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
Link to comment
  • 0
On 11/22/2019 at 5:34 AM, osholopa said:

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;
}

 

I got this to work for me as well, however I'd like to know the code to get the hamburger menu on the right vs. left side of header. 

Link to comment
  • 0
On 7/9/2021 at 12:31 PM, vjtk said:

I got this to work for me as well, however I'd like to know the code to get the hamburger menu on the right vs. left side of header. 

Can you share link to your site? We can take a look

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
1 hour ago, tuanphan said:

you mean align nav to right, closer social icons?

No, in place of the social icons. I would move those to the left where the logo currently is. 

Link to comment
  • 0
On 7/20/2015 at 11:39 AM, squareology said:

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.

Not sure what you mean about the menu being a black square and the height issue, its transparent with white lines on this end using both device view and an actual device (iphone) to check. I replaced the code I had with what you supplied, but the graphic was too large and there was text in the header (although I couldn't see it all on iphone as the logo was so big). 

Link to comment
  • -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
Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...