bravo.monster

Multiple Top-bar elements

Fixed elements at top of screen

top-bar-elements

Identify the issue:

  • You want something to stay at the top of the screen (sticky behavior)
  • You want to have two separate elements in a top-bar container
  • You tried adding a [layer] tag to an element that should stay sticky at the top of the screen

How to fix [layer] tag for the top of the screen?

Usually, we want to use the [layer] tag for sticky elements at the bottom of the screen. For the top of the screen, use [container:top-bar]. The top-bar container also works for multiple elements as long as they are in the same frame. Here is how to do it:
  • Place all elements at the top of the screen
  • Put all of them in a single frame
  • Add the [container:top-bar] tag to it
  • Find more information on the top bar tag here or watch my video
  • Remove the [layer] tag if you have used it

Get the sample Figma file:

Find more issues of this category:

Rate this solution and leave a comment.

Please create a thread in Bravo’s community for any issues.

0 0 votes
App Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
About
Contact
Imprint
Privacy

© 2022 bravo.monster
is independent from and does not represent bravostudio.app or figma.com