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

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

@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! :)

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/

I try the code but it doesn't work for me. Does anyone have another code? Thank you :)

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?

use background-size property for adjusting logo.

The correct seems to work fine, there must be problem in the way you're injecting the code in the template sections

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

Logo only displays when Banner Content: Site Title Logo Tagline is selected. Otherwise, the site title displays.

Design - Site Styles - Header - "Banner Content:"

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. 

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

Quote

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

sure, https://thermal-res.squarespace.com/ pass: 0000

On 7/26/2021 at 8:40 AM, vjtk said:

sure, https://thermal-res.squarespace.com/ pass: 0000

you mean align nav to right, closer social icons?

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. 

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