Help with Menu bar for mobile responsive/Desktop functionality

JavaScript
1

I Have a question, trying to work on a code with vanilla JS on responsive menu. I manage to to show my desktop menu but when it hits the 530px max-width it shows the burger icon, and have a functionally of toggle open and hide the menu, but it dosent seem to work right, for what i want, its just basically to show and hide the menu on mobile phone, but when i press the icon to hide on mobile and open in desktop mode the menu its gone and it should go back to its original state, full menu layout Desktop, i also been using browserSync to see both mobile and desktop changes at the same time but both does the same thing, and i don’t think its best practices to do. it should only show and hide on mobile but not in desktop.

Hope you all can help me…i did few things with my code in vanilla js. basic things. Here is the codepen.
and the browser sync if someome its not familiar to it.

https://browsersync.io/

2

This article will help you.

I’ve used it before and they do this by only using css.

3

i understand what you mean, but most of the time will be working on JS and its better to start doing integrations with js… any more ideas, are welcome, thanks !..

4 
function openMenu(){
  
  var siteMenuContent = document.querySelector('.site-header-content');
   if( siteMenuContent.style.display === 'block'){
       siteMenuContent.style.display ='none';
   }else{
      siteMenuContent.style.display ='block';
   }

This is because when you click the toggle button, the display of navbar gets none so in that case if you expand your viewport the expanded navbar would not show as currently it has been set to display:none

A possible solution could be to capture the width of the viewport upon resizing and then setting display property to block when viewport expands the media query limit. This link might be helpful

https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth