Navigation Menu Issues on Mobile

Hey guys, love this forum and any help with this would be very much appreciated!

I am having issues with the Nav Menu on Mobile. When looking at the Nav Menu on my phone I see 3 issues:

  1. The BG color is slightly transparent (the grey and white under “More”) even though I don’t have any transparency settings on.

  2. If I scroll down and then try to open the hamburger menu, nothing happens (I assume it’s “stuck” at the top of the page)…not sure how to fix this.

  3. When I click the hamburger menu, it shifts down and to the left slightly.

Thanks for looking at this for me :slight_smile:


Here is my site Read-Only:
https://preview.webflow.com/preview/canadagamescouncil?utm_medium=preview_link&utm_source=designer&utm_content=canadagamescouncil&preview=bcfdfc975a273abf83481c7c19b03a1d&mode=preview

Hi @rhami, Can you please share the phone(s) and OS(s) you are using? That would help isolate the issue or at least give us a starting point.

1 Like

I’m on a Samsung Note 8 running the latest Android but it happens on iPhone as well @webdev

  1. You have transparency on the nav at the tablet breakpoint.
  2. You added float to your nav, this makes the nav not fixed.

Once you fix the second point and redo your nav I think the third issue will go away. If not, post here again.

1 Like

Hey @dram the only thing that seems to be floated on the nav is the hamburger square so that didn’t fix anything unfortunately.

Appreciate all the help!

You are correct. I didn’t check preview, and inside the designer it did work. Anyway, just swap the fixed attribute between your container and navbar itself. The navbar should be fixed, not the container inside.

1 Like

Great thanks that did the trick!

1 Like