Streaming live at 10am (PST)

Where is the feature that allows me to hide/show elements on different device

#1

There use to be a “visible on” option where you can select if you wanted “visible” on a device. i dont see it any more, it was in setting under neath the tag.

For example i want to change my nave bar to a burger icon in the ipad and mobile, and i need to make the desk top nave to disappear

https://preview.webflow.com/preview/mommy-and-jane?utm_source=mommy-and-jane&preview=bbdfe401e44cac56f5da1d5b3e8119e7

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

#2

I know the default NavBar inside Webflow automatically adjusts your navigation menu to a burger stack menu depending on the device if you want to.

But it looks like you’re doing a custom job with the navbar using a DIV Container?

#3

i am using a div, so how can i make is disappear on mobile

#4

So one thing webflow does very well is that when you change the viewing device at the top, any changes you make to the elements on the page whilst that device is selected will only take effect whilst that specified device is in use.

So, what you can do is having the NavBar as to Display: Block when it’s on Desktop and Tablet but the Burger Stack Menu (When you create it) set to Display: None when viewing on Desktop on Tablet.

Then do vice versa for when you’re viewing on Mobile.

The Display options are shown under the Layout tab on the Style panel. The last option is a line through an eye icon is Display: None.

But, I would say you can save yourself a bucket load of time by using Webflows already provided NavBar element, and just redesign it how you’d like it to look.

#5

Just letting you know that the visibility option you remember being there was removed for good. Reasons aside you will need to use display:none for every breakpoint you want an element to be disabled on as @Martin_DSGNLAB suggested.

#6

oh i see, got it. they definitely changed that one.

#7

thank you for helping!

#8

No problem, good luck!