How to make a responsive header on with a burger menu (Tutorial)

It goes without saying that making web apps responsive is important — a requirement even.

But making headers responsive in Bubble can be specially tricky to do. Bubble doesn’t automatically hide elements when the header is viewed on smaller screens. Some sites use a burger menu (it’s the icon with three horizontal lines stacked on top of each other) on mobile view to save more space.

How to do this in Bubble? I’ve searched online for any tutorials on this, but many of them just show bits and pieces of the steps, so I used together them to arrive on the desired outcome. I made a tutorial on this, and I hope it’s helpful to anyone. Watch it below:

P.S. English is not my first language, but I tried my best to make the tutorial clear. If you have any clarifications, feel free to reach out.