How to make adaptive side leaving the menu?

Hi all. There is a push and slide menu, they go sideways. Menu Slide over the content, and Push the menu shifts the content. How to make the menu adaptive?
Adaptive - when a small resolution in a hamburger, under normal just in place.
Know what media screen, but skills is not enough.
Push https://codepen.io/chrissova/pen/OVgPNP
https://codepen.io/SuperManEver/pen/aOwgwm
Slide - https://codepen.io/ngannguyen/pen/KqBXeX
https://codepen.io/EKuhn/pen/wzGVkk
March 20th 20 at 11:45
1 answer
March 20th 20 at 11:47
I'm not using media screen can not
/*displays the Burger menu on the phone but not Otobaya the regular menu to a string*/
@media screen and (max-width: 775px){
.wrapper-burger-menu{display: block;}
.wrapper-char-menu{display: none;}
}

/* Not displayed Burger menu but displays the string menu on computers */
@media screen and (min-width: 1200px){
.wrapper-burger-menu{display: none;}
.wrapper-char-menu{display: block}
}


.wrapper-char-menu - menu string
(min-width: 1200px) - minimum resolution 1200 pixel
(max-width: 775px) - max resolution 720 pixels
@media screen and - the basic syntax for media queries

My needs are just changing display performance from the menu depending on the screen resolution of the user who went to your website

If something is not understood write in the comments
As I understand it .wrapper-burger-menu and .wrapper-char-menu classes. That means everyone needs to be a separate code? - may_Reilly commented on March 20th 20 at 11:50
@bell.Simonis, Yes,you have to add 2 menus on the page and every wrapped in these classes - Toney.Kli commented on March 20th 20 at 11:53

Find more questions by tags CSSHTML