Skip to main content

Hi,
I created and designed some pages for my portfolio in Figma. As one of the last steps I wanted to include a navigation bar. Which should look different on Desktop, Tablet and Mobile:

  • Desktop and Tablet: it should be a floating/sticky Element on the top
  • Mobile: It should be a classic Element with a burger menu, when you click on the burger the menu should appear.
  1. I created the navbars for each device/breakingpoint as a component
  2. I created an component set for all these navbars (including the variant for the open mobile version)
  3. I added an istance to the desktop page and on tablet and mobile the correct variants appera
  4. But when I preview it, and then go to the  mobile view and open the burger menu and then switch to tablet or desktop view the mobile navbar is still there. Also when I close the burger menu. 

    Check out the video which shows what I am struggle with. Thank you in advance :)

     

What did I do wrong?

 

Same here. Looks like another bug.
But you can get rid of it, as soon as you seperate the mobile header variants from the tablet/desktop variants. 

Hey ​@Heinrich999 — thanks for flagging this and for putting together the video walkthrough. I see what you mean about the desktop and tablet views showing the mobile toolbar instead of the floating navigation component.

Are you still running into this behavior with your prototype? If so, could you try testing again on both the Figma Desktop App (version 125.6.5 or later) and your web browser, and let me know if it shows up in one or both scenarios? In addition, did the solution suggested by ​@Finn Fischer lead to the expected result?

If it’s still happening after that, it’ll help for us to take a closer look at your prototype setup. I’m curious about a closer look at the transition/animation configuration — I wasn’t able to reproduce the issue on my side, so the next best step would be to reach out to our Product Support team and include:

That way, our team can take a deeper dive into specifics and see what might be going on. We’ll keep watch for your reply!

Terms & ConditionsCookie settingsAccessibility statement