Это типичное меню-бургер, в инете много примеров, мне помогло понять это -
https://www.youtube.com/watch?v=chJQofBSx94
Единственное, что он не объясняет - для чего делает слой :before у хедера. У него в примере это связано с использованием z-index в анимации. Если с анимацией (выезд меню сверху) заморачиваться не будешь, то можно обойтись без z-index и :before.