How to make it so that when you click on the "MENU" button, the burger opens (using CSS only) and automatically adds an indent for another block?

Question

css

How to make it so that when you click on the "MENU" button, the burger opens (the condition that the burger is only using CSS) and explicitly adds an indent for another block?
(at screen width 480px)

https://jsfiddle.net/Yurii931/u9qndjw3/

Answer 1

https://jsfiddle.net does not work in Russia. Purely practical: you wrap the menu in a label and add a hidden checkbox in front of the menu:

.burger-menu {display: none;}
.burger-checkbox:checked + .burger-menu {display: block;}

But semantically, this is such a solution.