minimised logo icon on mobile

3 replies · opened Jun 13, 2016

HheadrushJun 13, 2016

How can I have a icon only version of a logo (100 x100px) logo show in place of the standard logo only when in mobile view to create a little more room for nav icons, I have had a lot of help from you on nav customisation whereby youve created icons only on mobile view. I have the 100 x100px icon ready. Is this relatively easy to implement?

Thank you

SSemicolon WebSTAFFJun 14, 2016

Hello,

This is Absolutely Possible and already a Feature of Canvas. Visit this Page from your Mobile Phone: http://themes.semicolonweb.com/html/canvas/logo-changer.php .

You can simply add the data-mobile-logo="your-image.png" to the Logo and it will definitely work fine.

Let us know if we can help you with anything else or if you find any further issues.

HheadrushJun 14, 2016

Hmm... rather than detect that it is mobile and display I wanted to change out the logo for the small minimised icon when you reduce the screen size to xs. I tried using the hidden-xs class on the standard logo so that it is shown until the xs view, and then created a second class that i only want shown on xs by applying hidden-lg hidden-md hidden-sm that references the new small logo source. But when I have both lines in there the small logo doesn't seem to show.

When I comment out the first line the small logo shows only on xs view which is what i want but i cant get the standard logo to appear at lg, md and sm widths.

heres the code ive inserted inside the logo div:

[
![attachment](images/logo.png)
](index.html)
[
![attachment](images/logo-sm.png)
](index.html)
[
![attachment](images/logo@2x.png)
](index.html)
SSemicolon WebSTAFFJun 17, 2016

Hello,

This is currently not supported as the Logos work differently. Currently there are 2 Version of the Logo namely Standard and Retina. But the functionality you are trying to achieve can definitely be achieved using the data-mobile-logo="your-image.png" which works on the XS Screen Size.

Consider replacing the existing #logo code with the following code:


	[
![attachment](images/logo.png)
](index.html)
	[
![attachment](images/logo@2x.png)
](index.html)

This should definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard