The issue: When in responsive view, the dropdown button does not transition to the visible navigation bar from the menu icon after clicking any of its dropdown content.

More details: In responsive view (screen width below 730px), the navigation bar is replaced by a menu icon. The desired behavior is for any <a> or dropdown <button> to shift to the visible navigation bar upon clicking any dropdown item.

https://i.sstatic.net/iV2TEMhj.png

You can find the code at https://codepen.io/Balazs-Keisz/pen/KKOmgQX

Below is the JavaScript responsible for managing the navigation bar:

    // Function to toggle responsive class for topnav when icon is clicked
    function myFunctionIcon() {
      var x = document.getElementById("myTopnav");
      if (x.className === "topnav") {
        x.className += " responsive";
      } else {
        x.className = "topnav";
      }
    }
    
    // Function to clear all highlights
    function clearAllHighlights() {
      // Remove highlight from all nav items and buttons
      document.querySelectorAll('.nav-item, .dropbtn').forEach(item => {
        item.classList.remove('highlight-menu');
      });
    }
    
    // Function to highlight the clicked button or link
    function highlightButton(clickedElement) {
      clearAllHighlights(); // Clear previous highlights
      clickedElement.classList.add('highlight-menu'); // Highlight the clicked element
      
      
    // If the clicked element is part of a dropdown, ensure only the dropdown button is highlighted
      const dropdownButton = clickedElement.closest('.dropdown')?.querySelector('.dropbtn');
      if (dropdownButton) {
        dropdownButton.classList.add('highlight-menu'); // Highlight only the dropdown button
      }
    }
    
    // Event listeners for nav items and dropbtns
    document.querySelectorAll('.nav-item, .dropbtn').forEach(item => {
      item.addEventListener('click', function(event) {
        highlightButton(this); // Apply highlight
        // Prevent closing the menu when clicking the dropdown button
        if (this.classList.contains('dropbtn')) {
          event.stopPropagation(); // Prevent event from bubbling up
        }
      });
    });
    
    // Event listener for each dropdown content link to close responsive menu
    document.querySelectorAll('.dropdown-content a').forEach(link => {
      link.addEventListener('click', function(event) {
        const dropdownButton = this.closest('.dropdown').querySelector('.dropbtn');
        highlightButton(dropdownButton); // Highlight only the dropdown button
        if (window.innerWidth <= 729) {
          document.getElementById("myTopnav").classList.remove("responsive"); // Close responsive menu
        }
      });
    });
    
    // Event listener for any other responsive <a> links to close the menu
    document.querySelectorAll('.nav-item').forEach(link => {
      link.addEventListener('click', function() {
        if (window.innerWidth <= 729) {
          document.getElementById("myTopnav").classList.remove("responsive"); // Close responsive menu
        }
      });
    });
    
    // Dropdown toggle function for multiple dropdowns
    function toggleDropdown1(dropdownId) {
      var dropdown = document.getElementById(dropdownId);
      dropdown.classList.toggle("show1");
    }
    
    // Function to close all dropdowns
    function closeAllDropdowns() {
      var dropdowns = document.getElementsByClassName("dropdown-content");
      for (var i = 0; i < dropdowns.length; i++) {
        dropdowns[i].classList.remove('show1');
      }
    }

    // Toggle dropdown for the clicked dropdown button
    function toggleDropdown1(dropdownContent) {
      // Check if the clicked dropdown is already open
      var isOpen = dropdownContent.classList.contains('show1');
      
      // Close all dropdowns
      closeAllDropdowns();

      // If the clicked dropdown was not open, open it
      if (!isOpen) {
        dropdownContent.classList.add('show1');
      }
    }

    // Add event listeners for each dropdown button
    document.querySelectorAll('.dropbtn').forEach(button => {
      button.addEventListener('click', function(event) {
        // Prevent closing on the same dropdown click
        event.stopPropagation();

        // Get the corresponding dropdown content
        var dropdownContent = this.nextElementSibling;

        // Toggle the dropdown
        toggleDropdown1(dropdownContent);
      });
    });

    // Close the dropdown if the user clicks outside of any dropdown
    window.addEventListener('click', function(event) {
      if (!event.target.matches('.dropbtn') && !event.target.matches('.dropbtn i')) {
        closeAllDropdowns();
      }
    });

    // Attach event listeners to all <a> and <button> elements for highlighting
    document.querySelectorAll('.nav-item, .dropbtn').forEach(item => {
      item.addEventListener('click', function() {
        highlightButton(this); // Highlight the clicked element
      });
    });