I did this in Fisticuffs; it’s just a matter of giving it a negative position. However, input is a little wonky (I think the topbar sinks it) so you have to use UserInputService.InputBegan etc to detect input on things.
You aren’t able to have Developer GUI’s above CoreGui’s because it’s a security risk, you can set the top bar transparency to 1 then create a “fake” top bar to mimic as if they were inside of it.
Since the topbar will be fully transparent, input for the buttons you place shouldn’t be an issue.
How to disable the top bar but still keep chat though?
Aghhhhhh. All I want to do is put my shop button in the top bar instead of under the jump button on mobile. Why do I need to reimplement the entire thing.
Changing the topbar’a transparency shouldn’t disable the chat, although it might create a bad contrast between the chat’a grey colour and the topbar’s transparency. You can actually see that the game example you provided has the topbar transparent along with the chat. One last thing I suggest doing is exploring CoreGui, finding the topbar UI and checking its Z-Index, perhaps it’s something super high that you didn’t expect. Also it might be worth checking out GuiInset.
Instead of using SetCore on the StarterGui, you can set the PlayerGui’s TopbarTransparency to 1, making it transparent. Something like this:
local Players = game:GetService("Players")
local Player = Players.LocalPlayer
local PlayerGui = Player:WaitForChild("PlayerGui")
PlayerGui:SetTopbarTransparency(1) -- simple as that
You can then set the shop button to be somewhere near the corner of the screen, then create a fake frame that acts like the topbar (z index should be less than shop’s).
There is a property of ScreenGui called IgnoreGuiInset which does as the name says, ignores the top bar inset. Can use this instead of doing weird negative positions to get things to fit within the top bar nicely.