Streaming live at 10am (PST)

2 last items - need help with mobile nav and video embed resizeing


#1

Hey all,
I am just about done my first site in webflow. I learned a ton but still get stuck.

I need some help with the navigation, which is set to fixed and appears on scroll.
Now, when I go to mobile view the nav always stays fixed. How can I get it to
behave like the desktop view of appearing on scroll and then staying fixed.

The other issue is how to properly center my embed videos so that they do
not introduce side scrolling on mobile. How can I get the videos to keep
their ratio depending on the device.

Thanks.


#2

@fnd Can you share your public link please.


#3

snap... I keep on doing this. horrible.

https://webflow.com/design/in-my-lifetime-2?preview=e189d5ad8972b2565cd04cfa092f228d


#4

@fnd do this for your embed video:

  1. give your embed element a classname, ex. video-tribe-embed
  2. make its display as Inline Block
  3. set its width and height

  1. for your embed setting, set its width and height as 100%

Now you only need to set smaller width and height for video-embed-tribe class for all portraits

For your nav menu, if you want it appears exactly like your desktop view instead of burger menu, you need to set your nav same to all views: Menu icon for: None

Hope it helps.

Cheers.


#5

Regarding your scroll event... I ran into this same problem. Unfortunately this isn't possible with on iOS devices with Webflow. See topic here:

I was able to fake it though by having the main hero section above the nav bar using z-index. this way it would stay hidden on iOS and still seem to appear after you the hero section scrolls past. For desktop i still gave the nav a move into view and fadein interactions so it still has that nice reveal on everything but iOS

Hope that is making sense...


#6

Oh shoot. Sorry didn't realize the nav menu on phone portrait fail to stay.


#7

thanks so much @pastiwibawa the video is now displaying properly. Amazing.

and thanks @bryantay for the heads up on the nav not being able to stick.
I think I will just show it on load for mobile views and force the user to
scroll back up. It's not so bad for this type of one pager I have going on,
but would be good to see a solution to this.


#8