Amateur JS navbar request


Joined
Oct 31, 2021
Messages
7
Reaction score
0
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.
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.
 
Ad

Advertisements

Joined
Oct 31, 2021
Messages
7
Reaction score
0
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
JavaScript:
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
JavaScript:
$(".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.
 
Joined
Nov 13, 2020
Messages
94
Reaction score
17
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
Code:
@media only screen and (max-width: 768px) {
    .sidebar-collapsed .sidebar-collapsed-back{
        display:none;
    }
}
 
Joined
Oct 31, 2021
Messages
7
Reaction score
0
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.
 
Joined
Nov 13, 2020
Messages
94
Reaction score
17
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.
 
Ad

Advertisements

Joined
Oct 31, 2021
Messages
7
Reaction score
0
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.
1636223942368.png

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.
1636224079068.png

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top