How to switch images depending on screen size?

I have a logo that is 380 pixels across. I’m using the navbar symbol built-in to Webflow. It looks fine in a desktop and tablet size, but when I view it on mobile, the hamburger menu gets pushed beneath the logo, resulting in a very tall navbar. I have also prepared a smaller wordmark logo for a mobile version. I see two ways to proceed.

The first is to make the original logo shrink in size when I view it on mobile. However, there is the possibility that it shrinks to much and becomes hard to read. The second way is to somehow make the original logo switch with my wordmark, kind of like this: http://www.responsivelogos.co.uk/

How can I experiment with these two methods in Webflow? Thank you.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @mathhomework easiest way how to achieve this effect is to add all your logos into logo container and just use visible and hidden for logo image in desired viewport. This mean that you can set desktop logo hidden on mobile and vice versa.

another approach is here

There is more ways “how to” that are already solved and you can find these solutions here on forum

Hi @Stan Thanks for the reply. Unfortunately it seems that Webflow is phasing out of that setting, as there is a note next to it that says to use display:none; instead. However… I can’t seem to figure out how to make this conditional…

You can set items to display-none at different screen sizes. This functionality is not going away.

Capture

hi @mathhomework here is short video with one way how to

@Stan @britishchap Oh, now I understand. Thank you for the explanations. By the way, are you guys Webflow staff?

hi @mathhomework No I’m not WF Staff, is there any problem with that? Anyway if this solved your request feel free to close your request by checking any response as solution.

EDIT: WF staff have note "webflow staff " next to their name :wink:

@Stan No problem at all. I was just curious about your motivation for helping new users like myself.

1 Like

hi @mathhomework If I would not like to help I would not be here as many other no webflow staff members they help here in their own free time. This forum is not run by WF but now it looks they would like to take it over.

1 Like

@Stan Okay, well thanks again for your help!

1 Like