Navbar Lottie Animation Issues & Mobile Display Problem

Design help Animations & Interactions
1

Hi everyone,

This is my first post here as I recently started learning Webflow. I’m facing a couple of challenges with my project related to the Lottie animation and mobile navbar display:

  1. Lottie Animation Issue: My Lottie animation for the navbar loads in its final state instead of the initial hamburger icon. Additionally, when clicked, the animation doesn’t play; it jumps directly to showing the navbar in fullscreen. Does anyone know how to set the Lottie animation to start in its initial state and play correctly on click?
  2. Mobile Display Issue: On mobile, the navbar doesn’t cover the full screen on an iPhone; there’s still a strip of the body color visible at the top. Any advice on how to make the navbar fully cover the screen on mobile devices?

I’ve attached a screenshot for more context. Any insights or tips would be greatly appreciated!

Screenshot 2024-11-03 at 7.22.25 PM
Screenshot 2024-11-03 at 7.22.25 PM1920×1001 74.6 KB

IMG_BC4BD9BD6EE0-1
IMG_BC4BD9BD6EE0-11170×2532 65.9 KB

Thanks in advance!

Here is my public share link: LINK
(how to access public share link)

2

For the first item it seems you managed to fix it?

For the second item you can try making the body’s background color change while nav is open/closed. I guess that this behaviour is due to notch design on iphone screens so likely body is still a little visible while nav is open.

Let me know once you try it out

3

Hi Marko,

Thanks a lot for your help! :blush: The first issue is fixed, and your suggestion for the mobile display worked perfectly—no more body color strip at the top!

However, I now have a new issue with the navbar animation: when the page initially loads, the navbar is open by default, and I always have to double-click to close it. Do you know how I could fix it so that the navbar starts closed and responds with a single click as expected? I’ll add a screenshot for reference.

Thanks again for your guidance!

Screenshot 2024-11-04 at 7.56.11 PM
Screenshot 2024-11-04 at 7.56.11 PM3006×1438 191 KB

Read-only link: Webflow - Yerro Updated

4

Hey Marko!

Thank you so much for your help! I’ve found the solution, and it worked perfectly. :raised_hands: In the navbar CLOSE animation, I deleted all the initial states, and that finally did the trick—now everything works as it should!

For anyone else dealing with a similar issue, I found some helpful tips in the comments section of this video: https://youtu.be/Wn8WS4YCTK4?si=eLDogvBOf2CebHH0.

Thanks again, and hopefully this helps someone else in the community too!