How do I change the brand image in the navbar to a different image on mobile in Webflow?

Published on
September 22, 2023

To change the brand image in the navbar to a different image specifically for mobile devices in Webflow, you can follow these steps:

  1. Open your project in Webflow Designer.

  2. Click on the navbar element in the Designer canvas to select it.

  3. In the right panel, under the "Settings" tab, you can find the "Brand" section.

  4. Click on the "Brand image" field and upload the image you want to use as the brand image for mobile devices.

  5. Now, switch to the mobile view using the icons at the top of the Designer canvas.

  6. With the navbar still selected, go to the right panel and locate the visibility settings represented by an eye icon.

  7. Click on the eye icon to access the "Visibility Settings" for the navbar in the current device view.

  8. Enable the "Hide" option for the "Brand" section.

  9. To add a brand image that is different from the desktop version, locate the "Brand image" field in the visibility settings for the mobile device view.

  10. Click on the field and upload the different image that you want to use for the mobile version of the navbar.

  11. Preview your site in the Webflow Designer to see the changes made specifically for the mobile version of the navbar.

Remember to publish your project for the changes to take effect on the live site.

By following these steps, you can easily change the brand image in the navbar to a different image on mobile devices in Webflow.

Additional questions:

  1. How do I customize the appearance of the navbar in Webflow?
  2. Can I add dropdown menus to the navbar in Webflow?
  3. How do I make my Webflow site mobile-friendly?