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