Link to home
Start Free TrialLog in
Avatar of Melody Scott
Melody ScottFlag for United States of America

asked on

I need help adding nav-collapse

Hi, everyone, on this test site: mkmeals.com/responsive/index.html

I realized I should really have a nav-collapse on that side menu, but it's not something I've ever added. I've looked at a couple of tutorials, but I'm confused. Can someone please help me do that?

Thanks.
Avatar of Gary
Gary
Flag of Ireland image

Have you been through the docs
It's exactly the same for a vertical menu
Avatar of Melody Scott

ASKER

So for this: <ul class="navside2 nav-stacked2 ulside" id="sidebar">

I make it: <ul class="navside2 nav-stacked2 ulside collapse navbar-collapse" id="sidebar">

Is that right?
Looks right, make sure you have the Bootstrap Js file included as well (didn't check if you are already using it)
Thanks, I'll give it a try.
Hmm. that didn't work, the menu disappears on a smaller screen, and it loses some of its styling on a large screen.
I added this to class as well, but still not working:  navbar-toggle collapsed" data-toggle="collapse
I do have the js: <script src="js/bootstrap.min.js"></script>
You need your mobile version of the menu
<div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Menu</a>
    </div>

Open in new window


Then your menu block should start like this

    <div class="collapse navbar-collapse side" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navside2 nav-stacked2 ulside " id="sidebar">

Open in new window

I still haven't made this work, but I will try a couple of other things tomorrow.
No, I'm still not quite getting it, sorry! While I wait for your response, I'll go again and look over the bootstrap menu docs.
I've worked with it again including the class wellmk(which I changed from well), but what happens is that the menu breaks. Rather than running down with the items one by one, they end up two by two.
Just to let the experts know, this is what I have:

<!-- Begin Body -->
<div class="container">
<div class="row">
  			<div class="col-md-3" id="leftCol">
              	<div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Menu</a>
    </div>
				<div class="collapse navbar-collapse side wellmk" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navside2 nav-stacked2 ulside " id="sidebar">
                  	     <li><a class="side" href="index.html"> Home</a></li>
                  <li><a class="side" href="menu.html">Menu</a></li>
                  <li><a class="side" href="low-sodium.html">Low Sodium</a></li>
                  <li><a class="side" href="diabetic.html">Diabetic Friendly</a></li>
  	     <li><a class="side" href="weight-mgmt.html">Weight Management</a></li>
                  <li><a class="side" href="hypertension.html">Hypertension</a></li>
                  <li><a class="side" href="meals-for-seniors.html">Meals for Seniors</a></li>
                  <li><a class="side" href="nutritional-survey.html">Nutritional Survey</a></li>
  	     <li><a class="side" href="links.html">Useful Links</a></li>
                  <li><a class="side" href="newsletter.html">Newsletter</a></li>
                  <li><a class="side" href="diabetes-news.html">Diabetes News</a></li>
                  <li><a class="side" href="senior-news.html">Seniors News</a></li>
                  <li><a class="side" href="contact.html">Contact Us</a></li>
                  <li><a class="side" href="faq.html">Frequent Questions</a></li>
              	</ul>
  				</div>

      		</div>

Open in new window

As Gary indicated above http://getbootstrap.com/components/#navbar

I've adapted your code: http://jsbin.com/ramuco/1/edit?html,output

All I've done is remove the first "row" and "leftCol" and added the <nav> tag.
Thanks, I'll try this as soon as I get to work today.
Hi, please see screenshots below- first is what it looks like now, second is what I want it to look like. Additionally, when I make the screen smaller, the menu opens but doesn't close back up again.
User generated imageUser generated image
you can see it live here: mkmeals.com/responsive.

Thanks.
ASKER CERTIFIED SOLUTION
Avatar of Rob
Rob
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
OK, we'll give that a try, thanks! (A B because I still need to add in everything else, you didn't solve the problem within the look of the page). It will work, though, thanks!
Rob Jurd, just an FYI, in the code you gave, the menu doesn't collapse.
It collapses for me... how are you applying it?

User generated imageTO
User generated image
You're right, I apologize. I don't know why I thought it didn't...
All good - just wanted to fix something if that wasn't the case! :)