я не через медиа скрин не умею
/*отображается бургер-меню на телефонах но не отобоажется обычное меню в строку*/
@media screen and (max-width: 775px){
.wrapper-burger-menu{display: block;}
.wrapper-char-menu{display: none;}
}
/* Не отображается бургер-меню но отображается строковое меню на компьютерах */
@media screen and (min-width: 1200px){
.wrapper-burger-menu{display: none;}
.wrapper-char-menu{display: block}
}
.wrapper-char-menu - строковое меню
(min-width: 1200px) - минимальное разрешение в 1200 пикселей
(max-width: 775px) - макс разрешение у 720 пикселей
media screen and - обычный синтаксис медиа запросов
Мои запросы просто меняют свойсто display у меню в зависимости от разрешения экрана пользователя который зашел на ваш сайт
Если что-то не понял пиши в коменты
