I’m working on a one-page WordPress website and the page scrolls to each section when a menu item is clicked. It works well on desktops/laptops but on mobile devices when the hamburger menu is tapped, the menu opens and it blocks the screen. I would like to hide the dropdown menu list/section only on mobile. At the moment I have to close the menu by tapping on “X” close button.

I have searched for a solution and I found some JS code here in Stackoverflow but it has not worked.

Here is the JS code:

<script>
  function closeFunction()
  { 
     document.getElementById('bs-example-navbar-collapse-1').style.display='none';
  }
</script>

I’m not so experienced in JS but with some guidance I fix this, please help.

Screens: