Streaming live at 10am (PST)

Hiding / Showing Responsive Content


#1

I haven't really tried this myself yet, but I've watch all your tutorials and I didn't see anything about hiding / showing content.

Is this possible yet?

For example, Drop down menus and hiding content that is unnecessary on Mobile and Tablet.


#2

Well found the hide an show content. But how about Drop down menus. I think adding the hide / show options in your tutorials would be very helpful to some.


#3

Hi @Kyle_Oswalt. I'm glad you found the show and hide buttons in the settings. We'll be making more videos explaining some more stuff. Thanks!


#4

How do you hide or show content based on an event, i.e. mouse hover or when landing on a page section?


#5

Mind sharing? I would like to know how to show a menu when pressing a nav bar button, for example.

Like this:


#6

To make things invisible/visible for different devices you have to go to select an element and go to settings:

At the bottom you'll see "Visibility on":

To make something invisible or visible on hover, you'll have to select "hover" and and make the opacity 0.

As for drop downs: we will be including a navigation bar with drop downs in the future! Hold tight!


#7

Could you also make a container appear whenever you land on a section? (After you scroll into a section)


#8

Additionally, adding a transition, i.e. all 500ms ease-in/ease-out will add a graceful effect when showing/hiding after selecting "hover" and changing opacity to 1 or 0. Just apply the transition rule to the non-hovered state.


#9

@Thomas that's a popular thing these days. We don't support that right now but I think it would be a cool thing we will add later!


#10

I like the sound of that, thanks for your efforts. I'm loving Webflow


#11