How can I fix this drop down navigation javascript?

Question

If you do you will see the main menu. Now press F12 and enter to Phone view. If you do collapse my site until you see the navigation bar in phone mode. Try to click on the items having sub-menus. As you can see the drop-down buttons don't work in phone mode but they do work on the normal PC mode.

My javascript is the following:

// search-box open close js code
let navbar = document.querySelector(".navbar");
// sidebar open close js code
let navLinks = document.querySelector(".nav-links");
let menuOpenBtn = document.querySelector(".navbar .bx-menu");
let menuCloseBtn = document.querySelector(".nav-links .bx-x");
menuOpenBtn.onclick = function() {
navLinks.style.left = "0";
}
menuCloseBtn.onclick = function() {
navLinks.style.left = "-100%";
}




let follow = document.querySelector(".follow");
follow.onclick = function () {
navLinks.classList.toggle("show8");
}
let chat = document.querySelector(".chat");
chat.onclick = function () {
navLinks.classList.toggle("show3");
}
let coding = document.querySelector(".coding");
coding.onclick = function () {
navLinks.classList.toggle("show4");
}
let lang = document.querySelector(".lang");
lang.onclick = function () {
navLinks.classList.toggle("show2");
}

And my html is the follownig:

                        <div class="navbar">
                        <i class='bx bx-menu'></i>
                        <div class="nav-links">
                            <div class="sidebar-logo">
                                <i class='bx bx-x'> |☠ PRS ☠|</i>
                            </div>
                            <ul class="links">
                                <li>
                                    <a href="#">Follow us on</a>
                                    <i class='bx bxs-chevron-down follow arrow  '></i>
                                    <ul class="htmlCss-sub-menu sub-menu">
                                        <li><a href="https://www.twitch.tv/pirateradioshow98" target="_blank">☠| Twitch -PRS- |☠</a></li>
                                        <li><a href="https://www.twitch.tv/VieraGuti" target="_blank">☠| Twitch VieraGuti |☠</a></li>
                                        <li><a href="https://www.twitch.tv/legozgz" target="_blank">☠| Twitch -LEGO- |☠</a></li>
                                        <li><a href="https://www.twitch.tv/beyker1965" target="_blank">☠| Twitch -BEYKER- |☠</a></li>
                                        <li><a href="https://www.youtube.com/channel/UC6JWt6KSex34qH7rpokdTpg" target="_blank">☠| Youtube -BEYKER- |☠</a></li>
                                        <li><a href="https://www.facebook.com/Pirate-Radio-Show-103686634953174" target="_blank">☠| Facebook -PRS- |☠</a></li>
                                        <li><a href="https://twitter.com/show_pirate" target="_blank">☠| Twitter -PRS- |☠</a></li>
                                        <li><a href="https://www.instagram.com/pirateradioshow98/" target="_blank">☠| Instagram -PRS- |☠</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#">☠| Chat |☠</a>
                                    <i class='bx bxs-chevron-down chat arrow  '></i>
                                    <ul class="htmlCss-sub-menu sub-menu">
                                        <li><a href="https://s.team/chat/FVI1GpWg">☠| Steam |☠</a></li>
                                        <li><a href="https://discord.gg/3t82PbymUc">☠| Discord |☠</a></li>
                                        <li><a href="#">☠| Discord WOT SPAIN|☠</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#">☠| Coding |☠</a>
                                    <i class='bx bxs-chevron-down coding arrow  '></i>
                                    <ul class="htmlCss-sub-menu sub-menu">
                                        <li><a href="https://pirateradioshow.net/Learn_ENG">☠| Learn 2 Code |☠</a></li>
                                        <li><a href="https://pirateradioshow.net/Pentest_1_ENG">☠| HACKING & PENTESTING |☠</a></li>
                                        <li><a href="https://github.com/Oscuras98/" target="_blank">☠| GitHUB |☠</a></li>
                                        <li><a href="https://www.facebook.com/groups/765324447394866" target="_blank">☠| FB Dev Group |☠</a></li>
                                    </ul>
                                </li>
                                <li><a href="https://pirateradioshow.net/Free_GAMES_ENG">☠| Free Games 4 Everyone! |☠</a></li>
                                <li><a href="https://pirateradioshow.net/Donations_ENG">☠| Donations |☠</a></li>
                                <li>
                                    <a href="#">☠| Languages |☠</a>
                                    <i class='bx bxs-chevron-down lang arrow  '></i>
                                    <ul class="htmlCss-sub-menu sub-menu">
                                        <li><a href="https://pirateradioshow.net/inicio">☠| Español |☠</a></li>
                                        <li><a href="https://pirateradioshow.net/index">☠| Magyar |☠</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>

I don't want to talk more about the issue just find a way to solve this since it has already taken 6 hours of my life trying to find a solution by myself

maybe put more-arrow element into html part? – Flash Thunder Aug 01 '21 at 08:08 — Flash Thunder, Aug 01 '21 at 08:08

How can I fix this drop down navigation javascript?

0 Answers0