Amateur JS navbar request

[cornucopia]

Hello folks;
I wonder if someone can advise me on how to change this wonderful navbar so that it defaults to collapsed on mobile devices.

Toward Zero Impact

Sharing solutions to climate change through simplicity

towardzeroimpact.net

I'm fine with it remaining as is for large screens (1000px and up), but it should be collapsed on smaller screens so that the user doesn't have to figure that out on loading the page.

I got the navbar code originally from this CodePen design.

I thank you in advance for your suggestions.

 

[BigDady]

Look up 'Responsive Design'. https://www.w3schools.com/html/html_responsive.asp

 

[cornucopia]

Thank you BigDady for your input. However I'm reasonably certain that this is not a css problem but a js problem. This is the normal nav-bar js code

var toggle = true;
           
$(".sidebar-icon").click(function() {              
  if (toggle)
  {
    $(".page-container").addClass("sidebar-collapsed").removeClass("sidebar-collapsed-back");
    $("#menu span").css({"position":"absolute"});
  }
  else
  {
    $(".page-container").removeClass("sidebar-collapsed").addClass("sidebar-collapsed-back");
    setTimeout(function() {
      $("#menu span").css({"position":"relative"});
    }, 400);
}
   
    toggle = !toggle;
});

I attempted to switch the if/then statement to see if it would load the navbar in a collapsed state

$(".sidebar-icon").click(function() {              
  if (toggle)
  {
    $(".page-container").removeClass("sidebar-collapsed").addClass("sidebar-collapsed-back");
    $("#menu span").css({"position":"absolute"});
  }
  else
  {
    $(".page-container").addClass("sidebar-collapsed").removeClass("sidebar-collapsed-back");
    setTimeout(function() {
      $("#menu span").css({"position":"relative"});
    }, 400);
}

but it did not. It's likely that css would be used with media-queries to control the point where the navbar switches. But how to accomplish the actual switch to a default collapsed state is beyond my understanding.

 

[BigDady]

Does adding this to your header do anything?
<meta name="viewport" content="width=device-width, initial-scale=1.0">

also try this in your css

@media only screen and (max-width: 768px) {
    .sidebar-collapsed .sidebar-collapsed-back{
        display:none;
    }
}

 

[cornucopia]

Thank you for that suggestion.
On the first one, I already have "meta name...initial scale" written into the head of the html page. I believe this controls the initial zoom level of the page.
The second bit of code is a good idea, but it does not solve the problem.

 

[BigDady]

OK. Looked at the site code.
Use this:
@media only screen and (max-width: 768px) {
.sidebar-menu{
display:none;
}
}
Adjust max-width to your liking.

 

[cornucopia]

Thank you. That brought me closer. It does manipulate the navbar on small screen. However it causes the navbar to be completely invisible (display:none however this means that a user cannot access the expansion button. What I'm hoping to get is a collapsed, but not hidden navbar. With the content shifted as it is with user-input.

I got a little closer by using this code with the same css tag
<code>
@media only screen and (max-width: 768px) {
.sidebar-menu{
/*display:none;*/
width: var(--Nav-collapsed);
}
}
</code>
This gave me the right width, but the imagery is convoluted.

I feel as if there should be a way to have it collapse the way that the js functions after a person hits the arrow button