How to make a UI element stay on the top bar

[uJordy]

I’m unsure how to keep an icon on the top bar segment of my screen.
I’ve tried using scale and offset values but in the way I’ve made makes it to stay where it should be on certain resolutions.
Does anyone have any different ways to get around this?

[kingdom5]

This topic should help a lot.

Keeping the Aspect Ratio of your GUIs

Update: Please note this guide was written before the implementation of UIScaling and Constraints, it is recommended that you use those unless you have specific-use case for this or prefer this method. a 2am in the morning tutorial, hooray! I’m putting this out for people who want to know a way to keep the aspect ratio of GUIs the same whenever the Roblox game window is resized. I used to stick with the offset size a ton because in general it looked better and scaling usually has those blurry …

[uJordy]

Thanks, I’ll have a go shortly.

[Headstackk (Stacky)]

ScreenGui.IgnoreGuiInset = true ?

[addisonshiu]

Those buttons in the top bar have a fixed size, their size are UDim2.new(0,50,0,36). So if you make your own custom button, just make sure its size is UDim2.new(0,50,0,36).
As there are 3 buttons in the topbar by default, you have to change the position of your button to UDim2.new(0,150,0,0).

Also, you have to set ScreenGui.IgnoreGuiInset = true, else the button will not appear inside the topbar.

Conclusion:
Button Position: UDim2.new(0,150,0,0)
Button Size: UDim2.new(0,50,0,36)
ScreenGui.IgnoreGuiInset = true

[uJordy]

What’s the X.Offset increment for the buttons?

[haash_im]

GuiService | Documentation - Roblox Creator Hub

Use the negative Y value of this to position the icon and make the icon sized accordingly. The Inset differs on platforms so I’d recommend using scripts to reposition the icon.

Alternatively, please see : ScreenGui | Documentation - Roblox Creator Hub