Skip to main content
Solved

Menu Bar not protoyping correctly (not always sticking in the top left through pages)


My Menu Bar is not always sticking at the top left of my webpage when prototyping, whenever i change the pages through components protoyping the menu bar doesnt stay in its place as it should. Important to mention that most of the times the prototypes work correctly first time trying but never the second or more, it also worked well before.
I am new to Figma and I dont see if the problem is the component of the menu, the prototyping or my device. The problem occurs when i change pages without an order and when i go to “About” page.
This is the link: https://www.figma.com/proto/1txB5b3pQZAMdbvJbKmfyM/Mashtra?page-id=0%3A1&type=design&node-id=1-2&viewport=6414%2C464%2C0.39&t=lN2a0EJIqKGjQY4R-1&scaling=contain&starting-point-node-id=1%3A2&mode=design

Best answer by Raphael_M

Hmmm. I’m not entirely sure what you mean but based on the file that you gave, I don’t see any fixed scroll in the about page. Probably because it’s not in fixed so it randomly goes

And then this is the current function of your about page.

I suggest that you correct it and add the same implementation you did in all the other pages.

I’ve kind of arrange it and it works fine with me, not entirely sure what you mean.

View original

Raphael_M
  • Power Member
  • March 7, 2024

Hi, Genta.

It’s a whole page. 😅

Is it possible for you to share the file?

Thanks.


  • March 7, 2024

This is the link to the file, I removed everything else from the duplicate and left the only component that causes the problem. Also when I go on prototype mode in the “About” Page the “Contact” and “About” Button wont work. You can also see that the rectangle doesnt stay in its place.

Figma – 7 Mar 24

Raphael_M
  • Power Member
  • March 7, 2024

Hi, Genta.

After checking your file, I saw that your frame is set to the actual size of the page.

Furthermore the only item fixed in your file is the rectangle so I have to group it first and arrange it properly. If you check your layers, you can see which layers are in Fixed and which are in Scrolls

So what you need to do first is separate the page or wrap it by using frames or auto-layout or however you want and put only the menu-nav layer or group in the fixed and others in scrolls.

After that, set the main frame or the page’s height into the viewport dimension like: 1336 x 720 or 1440 x 1080, depends on the resolution.

After that, the Fixed layer should be fixed when you scroll the page in preview or presentation.


  • March 7, 2024

Thank you for the detailed answer and your time. The About page is fixed as in your video, but when i go back to the homepage and go to “About” page again it appears in the previous state, not correct as before.


Raphael_M
  • Power Member
  • March 7, 2024

Hmmm. I’m not entirely sure what you mean but based on the file that you gave, I don’t see any fixed scroll in the about page. Probably because it’s not in fixed so it randomly goes

And then this is the current function of your about page.

I suggest that you correct it and add the same implementation you did in all the other pages.

I’ve kind of arrange it and it works fine with me, not entirely sure what you mean.


  • March 7, 2024

Thank you again for your time. I did what you said, I fixed every nav in each page and I also removed an interaction of the “X” button that was “Change to” which might have caused the problem too. I also appreciate the suggestion of the viewport, I’d welcome any other recomandation you might have since you’ve seen the design.
All the best!


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings