Pro - Adding logo to “off canvas” of navigation collapsed element and Navigation Modal

[bjmiller]

I’d like to be able to add a logo to an off canvas navigational collapse for mobile. This piece of Java Script was available from another thread but when I change the width and height nothing happens. Would also like to know how to add a logo to a navigation modal.

 jQuery(document).ready(function($){
   $('.x-off-canvas-content').prepend('<a class="x-image" href="#"><img alt="Image" src="https://themeco-templates.s3.amazonaws.com/assets/logo-green-white.png" width="172" height="70"></a>');
 });

[rad]

Hi there,

Thanks for writing in.

Adding size attribute to your image will not work, please add it through styling. Like this

 jQuery(document).ready(function($){
   $('.x-off-canvas-content').prepend('<a class="x-image" href="#"><img alt="Image" src="https://themeco-templates.s3.amazonaws.com/assets/logo-green-white.png" width="172" height="70" style="width: 172px; height: 70px; "></a>');
 });

Cheers!

[bjmiller]

Thanks for the quick response. That allows me to change the height but the width stays the same. Any advice would be appreciated.

[paul.r]

Hi,

Kindly change the code to this.

jQuery(document).ready(function($){
   $('.x-off-canvas-content').prepend('<a class="x-image" href="#"><img alt="Image" src="https://themeco-templates.s3.amazonaws.com/assets/logo-green-white.png"  style="width: 172px;height: 70px;"></a>');
 });

You need tpo change it in inline style. style="width: 172px;height: 70px;"

Thanks

[bjmiller]

Is that as wide as it can get? I’ve tried changing the px width but still nothing happens. The height changes fine but the width doesn’t.

[ruenel]

Hello There,

Your image dimension is only 172x70. Do you want it to display a little bigger? You will need to change the style into this: style="width: 320px;height: auto". This will increase the width of the image and have the height as auto relative to the width. You will also get a blurry image because it is already being stretched out.

For best results, please upload or use an image with a larger dimension.

Please let us know how it goes.