Sticky navigation bar appears underneath content on Safari and mobile browsers

Having the same issue, just on Mobile. Followed the same usual steps (ensure header is first thing on page, set autolayout to ‘first on top’, make header sticky) but still no luck.

Hey ​@Minii, thanks for the detailed explanation! Just to help narrow things down, are you seeing the same behaviour in the Figma desktop app, or is it only happening in Safari? If you’re not seeing any issues on the desktop app this might be Safari related. 

If you’re comfortable sharing, it would be really helpful to have the Figma site link so I can try to reproduce the issue on my end. You can also invite support-share@figma.com directly to your file as an editor (this won’t affect your billing at all). This lets me take a closer look and loop in the right team to investigate.

Hey ​@ellixtt, thanks for flagging this. Could you also please check if you’re experiencing this in the desktop app. And on which browser are you using this on the Mobile? 

Hi ​@Gayani_S 

Thanks so much for getting back to me!

Here’s a breakdown of my testing so far:

• ✅ Figma desktop app: Sticky navigation works as expected.

• ✅ Chrome (desktop & laptop): Also working perfectly.

• ❌ Safari (desktop & laptop): Sticky GNB appears underneath hero content.

• ❌ Mobile (Safari & Chrome): Same issue on both browsers — GNB is sticky, but it gets pushed behind other layers.

So to clarify, this isn’t just a Safari-specific issue — it affects all mobile browsers including Chrome.

I’ve also invited support-share@figma.com to the file as an editor so you can take a closer look. Please let me know if there’s anything else I can provide to help troubleshoot this!

Really appreciate your support on this!

Hi ​@Gayani_S 

My issue is exactly the same as ​@Minii is experiencing. In the in-app preview view on Figma, both the Desktop and Mobile versions of the sticky header work as expected. Visually, they’re fixed to the top of the page, and when I scroll, the content scrolls beneath them.

When I publish to my live site, the Desktop version works perfectly, but the Mobile version (while being sticky at the top) appears beneath other content, which scrolls over it. This is on both Chrome and Safari.

Hey ​@Minii, thanks for the detailed breakdown! So the issue is happening across all mobile browsers + in Safari on desktop, but things are working as expected in the Figma desktop app and Chrome.

Can you please share the file link here under this post? If you’d rather not post it publicly, feel free to DM it to me directly.

Thank you! 

Hey ​@ellixtt, thank you much for chiming in! To get a better sense of what’s going on, I’d love to loop in the team internally for a closer look. If you're comfortable sharing you Figma sites link, you can drop the file link here and also invite support-share@figma.com as an editor (this won’t impact your billing in any way). If you don’t want to post it publicly, feel free to DM it to me directly.

Thanks, 

Gayani 

​@Gayani_S Yes, that’s correct. I just sent you the file link via DM.
Thanks so much!

Indeed, having the exact same problem.  In front in chrome, but renders in the back in safari :)

Hey everyone, apologies for the delayed response! 

I’ve shared the file link ​@Minii shared with me via DM with the team to investigate what’s causing the sticky navigation bar to appear underneath content on Safari and mobile browsers. It may take a bit of time to investigate, but I’ll make sure to keep you all updated as soon as I have more to share.

Really appreciate your understanding while we work on this!

I have the same problem so I’m looking forward to updates

any updates on this? having the same situation.

Hey everyone! Unfortunately I wasn’t able to receive any updates on this case. I’ll follow up as soon as I hear back from the team. Apologies for the delay! 

just +1 this issue, keep me posted.

I am experiencing the same issue.. This causes alot of issues for me. Please keep me posted for any updates.

+1

Hi everyone, I’m really sorry for the late update here, and thank you for your patience while I got back to you. The team has confirmed that this issue has been fixed. Could you let me know if things are working as expected on your side now, or if you’re still running into problems? 

Thank you, 

Gayani 

I’m having a similar issue, but my sticky header doesn’t work on the preview before publishing my site. The sticky header will always stay on the back of the screen and when I set it to Bring to the Front, it’s moved to the bottom of my screen. Very annoying😭

Okay I was having this issue and just managed to fix it.

Yes the solution is within the auto layout settings but it takes a possibly non-intuitive interaction to solve it.

If your sticky element is inside of a layout group the stacking order that needs to be changed is the layout group that the element is inside of and not the element itself.

I assume most people use auto layout as the foundation for their page then stack things inside of it - if so the auto layout for your page is where the stacking order needs to be changed.

Hi, specifically searched for a fix to this issue and bummed to see there’s no solve. Just that the team resolved it. Any more info? I’m running into this problem in Figma app.

Ridiculous, I have this exact problem to this date. When I make the top bar fixed, its sitting behind my hero frame on figma app (mac), but I use browser it sits at the front.

Hey everyone, thank you for sharing these updates!

I’ve gone ahead and re-escalated this to the team so they can take another look. I’ll follow up here as soon as I have more information from the team.

Thank you for your patience and for sticking with us while we work to get this sorted out.