Navbar Dropdown won't display for Home page on Mobile Portrait view

Design help General
1

Hello! New user here, having an issue and hoping someone can help me out! (Read only link attached below)

I made a navbar for my site, and in the Webflow previewer it works great (hover/click on “My Work” and the dropdown appears). However when checking the Staging Site on Mobile (portrait) view, the dropdown doesn’t appear only on the Home page. It works fine on my other page (“Professional” link). I have no idea why it isn’t working since the dropdown is pretty much the same between the two pages too… The only difference I can think of is that the Homepage navbar is Sticky, but that’s it…

Some additional context (across all pages);

  • Desktop button for “my work” is different from tablet and below, since it is the only one utilizing a link to homepage
  • Desktop, tablet, and landscape mobile use Absolute positioning for dropdown. Only mobile portrait uses Fixed for Dropdown List, since it was the only way I could manage to make the dropdown cover 100VW (this is my intention):

Current mobile dropdown settings:

Screen Shot 2022-08-17 at 11.51.00 PM
Screen Shot 2022-08-17 at 11.51.00 PM464×1114 37.2 KB

What’s happening on a real phone
IMG_6948.PNG
IMG_6948.PNG750×1334 75.5 KB

What I want to happen (working on ‘Professional’ page)
IMG_6949

  • I tried many things like different positioning, changing overflow from hidden to visible, etc. but no luck…

Any help would be greatly appreciated! :slight_smile:

My Read Only Link -
https://preview.webflow.com/preview/kirthankm?utm_medium=preview_link&utm_source=designer&utm_content=kirthankm&preview=8cabdf473bf3cce93a19ed3c64de4bec&workflow=preview

2

@kirt_m

You have navbar set to a 19 z-index, simply change your Nav Menu to something higher than 19, say 20.

Works perfectly.

Screen Shot 2022-08-17 at 8.23.06 AM
Screen Shot 2022-08-17 at 8.23.06 AM1920×954 101 KB

3

Thanks for the feedback @Kevin_Mooney !

I tried updating the Z-index value of the Nav Menu like you suggested, but it seems like it’s still not working on the live version on mobile (staging site is https://kirthankm.webflow.io)… Theoretically I understand it should work, but it just doesn’t seem to. Any ideas why? Or is it just my device?

4

@kirt_m

It works for me, I think maybe you should clear your cache and history and check it again

Screen Shot 2022-08-17 at 11.26.20 AM
Screen Shot 2022-08-17 at 11.26.20 AM1920×1100 84.2 KB

5

@Kevin_Mooney
Sorry, doesn’t seem to have fixed it :frowning:
From the screenshot you sent, it seems based on the desktop and tablet versions, which I’ve confirmed work. Does the drop down menu appear on the home page when you view the site on your phone in portrait mode? That’s the area I still can’t get to work…

Another point I’ve noticed is that the other views work because of Absolute positioning. It seems to not like it when I keep the mobile version on Fixed. Maybe another workaround is using Absolute positioning and being able to cover 100vw for the phone, but I haven’t been able to get that working either (it always appears directly underneath the “My Work” button so it’s off-center, and adding any margins or change in position placement mess up the responsiveness between devices).
Any additional advice is much appreciated, thank you! :slight_smile: