Как при адаптивной верстке поменять содержание меню?

Question

Дело в том, что в десктопной версии сайта содержание меню одно (первый скриншот), а при адаптивной верстке это же меню слегка измененное (второй скриншот). Недолго думая, я поменял содержание меню в HTML, но потом обнаружил, что оно поменялось и в десктопной версии, а это мне совсем не надо. Как мне поменять содержимое меню ТОЛЬКО в адаптивной версии? В адаптивной верстке я использовал JS для гамбургер-меню.

const hamb = document.querySelector("#hamb");
const popup = document.querySelector("#popup");
const menu = document.querySelector("#menu").cloneNode(1);

hamb.addEventListener("click", hambHandler);

function hambHandler(e) {
    e.preventDefault();
    popup.classList.toggle("open");
    renderPopup();
}

function renderPopup() {
    popup.appendChild(menu);
}

@media(max-width: 340px) {
    .top {
        width: 340px;
        height: 400px;


        .navbar__wrap {

            .hamb {
                padding-left: 20px;
            }

            .logo {
                padding: 0px 0px 0px 22px;
            }

        }

        .top-promo {
            padding-top: 33px;
        }

        .popup.open {
            max-width: 340px;

            .menu {
                width: 340px;
                padding: 0px;

                .menu-list {
                    margin-top: 30px;
                    list-style-type: none;

                    .menu-list__text {
                        font-family: 'Rubik';
                        font-style: normal;
                        font-weight: 500;
                        font-size: 18px;
                        line-height: 20px;
                        text-align: center;
                        color: #444444;
                    }


                }


                .menu-list:first-child {
                    margin-top: 60px;
                }

                .menu-list:last-child {
                    font-weight: 400;
                    margin-top: 43px;
                }

            }

        }

    }
}

<div class="top">
        <nav class="navbar">
            <div class="container">
                <div class="navbar__wrap">
                    <div class="hamb">
                        <div class="hamb__field" id="hamb">
                            <span class="bar"></span>
                            <span class="bar"></span>
                            <span class="bar"></span>
                        </div>
                    </div>
                    <img class="logo" id="logo" src="img/logo.svg" alt="">
                    <ul class="menu" id="menu">
                        <li class="menu-list"><a class="menu-list__text" href="#">о компании</a></li>
                        <li class="menu-list"><a class="menu-list__text" href="#">наши питомцы</a></li>
                        <li class="menu-list"><a class="menu-list__text" href="#">как забрать питомца домой?</a></li>
                        <li class="menu-list"><a class="menu-list__text" href="#">о полезные советы</a></li>
                        <li class="menu-list"><a class="menu-list__text" href="#">контакты</a></li>
                        <li class="menu-list"><a class="menu-list__text" href="#">8 800 500 50 00</a></li>
                    </ul>
                    <ul class="menu-media menu">
                        <li><img src="img/Instagram.svg" alt="instagram"></li>
                        <li><img src="img/vk.svg" alt="vk"></li>
                        <li><img src="img/telegram.svg" alt="telegram"></li>
                    </ul class="menu-media">
                </div>
            </div>
        </nav>
        <div class="popup" id="popup"></div>
    </div>

БЛОГ НА HUSL

Как при адаптивной верстке поменять содержание меню?

Ответы (0 шт):