Visibility of navbar elements in different breakpoints

Hi, i was looking for help on how to replace elements depending on the breakpoint sizes. What i’m trying to achieve: i have a logo on the navbar of my site and this logo (svg 1) has some complexity to it, therefore i would like this logo to display (be replaced by) a more simplified version (svg 2 - which i already have in the Assets) on mobile landscape and portrait views. How do I go about doing this?


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

hi @Antonio_Soveral as you do not follow forum request guide no one can see how you have implemented it and as there is always many ways how to achieve identical result it will be very hard to give a “correct” answer.

Anyway here are some options:

  1. do it programaticaly with custom code.
  2. If you are “no-coder” you can place both images in one area and set visibility (hide) for both the way you need. This mean hide complex logo on smaller viewports and show simplified version.

NOTE: you can face an issues with mobile landscape as resolution (pixel density) is almost identical with lager mobile devices or monitors. Here will come custom code (media queries) where you set landscape orientation conditions.

good luck

Hi Stan, thank you for your response.

How do i follow the forum request guide?

Regards.
Antonio

hi @Antonio_Soveral it is pined on top of each section.

if you have miss it here it is

When posting please:

  • Required: Share your project’s Read-Only link and live site’s Published link
  • The read-only link is a special URL generated in the Dashboard to allow others to view your project in the Webflow Designer. How to get your project’s read-only link?
  • The published link is the webflow.io subdomain where you can view the live site with custom code running. It is IMPORTANT to share this link, as custom code does not run in the Designer.
  • Describe issue in detail including what page, section and/or element is localized
  • Upload as many screenshots as possible or provide screencast videos to help others help you faster
  • Add a description and/or post a link to a working example of what you’re trying to achieve
  • Reply to users by tagging using the @ sign followed by their forum username like this: @formMemberName

hope this will help