IX2 - Weird Navigation behavior

Design help Animations & Interactions
1

Hi guys!

So I have switched back to IX2 for the time being as I am much more comfortable with it than GSAP for now.

I am running into an issue with my mobile navigation though. The interaction works perfect in the Designer preview, as well as at smaller break points on desktop (ie. If I resize my window down to mobile size).

However, when I am on my phone, the navigation refuses to go to full height. What should happen is the navigation opens only to be about the same height as the navigation. I am at a loss as to why because the interaction seems to be setup correctly. I have also tried both Edge and Safari on iOS, as well as opening the window in a InPrivate session to see if it was a caching issue.

Any advice you can give would be great. Thanks! Read-only is linked below.

Here is my public share link: [LINK][1]
([how to access public share link][2])

[1]: Webflow - A&B Paving and Sealing)
[2]: https://university.webflow.com/article/sharing-your-sites-read-only-link

2

Hi there,

You can adjust the nav dropdown menu height for smaller breakpoints by following these steps:

  1. Switch to the tablet breakpoint in the Designer
  2. Select your navbar element
  3. In the Element settings panel, locate and click on “Menu > Show”
  4. Look for the height settings in the menu options
  5. Adjust the height value to ensure your nav links are properly sized for touch interactions

This setting will apply specifically to touch device breakpoints, making your navigation more user-friendly on mobile and tablet devices.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

Setting the .mobile-nav-container to position: fixed and height to 100% will fill screen as desired, but you will need to consider your layout in terms of user scroll when the nav is open on mobile.

  • If you want to continue to use the trigger effect and have it visible when the menu is open the nav will ideally be fixed to the top (as to avoid scroll issues when open).
  • Alternatively, the .mobile-nav-container will sit above the nav and have a separate close trigger (so it functions as a slide-in, slide-out nav).

Both options will work fine - designers choice! Hope this helps. :slight_smile:

4

Okay so I am genuinely not 100% sure what I did to fix it, but it now seems that the nav is working as expected :joy: I’m honestly wondering if it was just some glitch with Webflow and the code that it output when I published. Wouldn’t be the weirdest thing I 've heard about happening.

I think your solution would have worked too. My biggest concern was the fact that I have setup many navs exactly like this at this point and never had this issue. So I thought I was going crazy lol

You can check out the final product on the staging site: https://abpaving.webflow.io