Как с помощью JS заменить изначальный текст только для медиа запроса?

Question

У меня есть меню сайта на десктопе (первый скриншот), также у меня есть меню для адаптивной верстки (второй скриншот). Как можно заметить, они отличаются по тексту, и именно это является для меня проблемой. Я использую для адаптивного меню те же элементы, которые используются для десктопной версии. Текст в этих элементах мне нужно заменить так, чтобы он менялся только во время работы медиа запроса. Как мне это сделать?

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);
}

<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="#">
                                <p class="menu__text">о приюте</p>
                            </a></li>
                        <li class="menu-list"><a class="menu-list__text" href="#">
                                <p class="menu__text">питомцы</p>
                            </a></li>
                        <li class="menu-list"><a class="menu-list__text" href="#">
                                <p class="menu__text">полезные советы</p>
                            </a></li>
                        <li class="menu-list"><a class="menu-list__text" href="#">
                                <p class="menu__text">контакты</p>
                            </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>
        <!-- <h3 class="top-promo">ПРИЮТ ДЛЯ СОБАК <span style="color: #E73D66;">ЧЕТЫРЕ ЛАПЫ</span></h3>
        <h1 class="top-promo__big">ВОЗЬМИ ДРУГА <span style="color: #E73D66;">ДОМОЙ</span></h1> -->
        <!-- <div class="bg">
            <img src="img/bg-dogs.png" alt="bg-dogs">
        </div> -->
    </div>

БЛОГ НА HUSL

Как с помощью JS заменить изначальный текст только для медиа запроса?

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