CODEWITHSUNDEEP
htmlmenuelementorsticky-header
JeannieB
JeannieB

Reputation: 1

HTML to close sticky header menu containing anchor link

I have built a sticky header containing menus using Elementor Pro. The menu that doesn't display as desired only contains anchor links to the current page. When clicking on an item in the menu, the page scrolls to the anchor, but the menu remains open.

After searching and experimenting, I added the following code in an html widget.

<script>
    document.getElementById("e-n-menu-content-1421").addEventListener("click", hidemenu);
    
    function hidemenu() {
        var x = document.getElementById("e-n-menu-content-1421");
        x.style.display = "none";
    };
</script>

At first, the code appeared to work properly. In desktop mode, the menu closes when an anchor link is clicked and the menu icon displays the closed icon. However, I believe this is because hover is enabled and as the menu disappears, the menu becomes inactive by default.

While this appeared to be the desired effect, when viewed on a mobile device, the menu closes, but the menu still shows the open menu icon. So, to select a different item/anchor from the menu, I need to click on the menu to close the menu then click again to open the menu. So I realized that the code is just hiding the menu items rather than actually closing the nav menu. I am a html beginner so I would appreciate any help.

Upvotes: 0

Views: 46

Answers (0)

Related Questions