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.
mel200Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Have you been through the docs
It's exactly the same for a vertical menu
0
mel200Author Commented:
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?
0
GaryCommented:
Looks right, make sure you have the Bootstrap Js file included as well (didn't check if you are already using it)
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

mel200Author Commented:
Thanks, I'll give it a try.
0
mel200Author Commented:
Hmm. that didn't work, the menu disappears on a smaller screen, and it loses some of its styling on a large screen.
0
mel200Author Commented:
I added this to class as well, but still not working:  navbar-toggle collapsed" data-toggle="collapse
0
mel200Author Commented:
I do have the js: <script src="js/bootstrap.min.js"></script>
0
GaryCommented:
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

0
mel200Author Commented:
I still haven't made this work, but I will try a couple of other things tomorrow.
0
mel200Author Commented:
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.
0
mel200Author Commented:
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.
0
mel200Author Commented:
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

0
RobOwner (Aidellio)Commented:
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.
0
mel200Author Commented:
Thanks, I'll try this as soon as I get to work today.
0
mel200Author Commented:
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.
What it looks like nowwhat I want it to look like
you can see it live here: mkmeals.com/responsive.

Thanks.
0
RobOwner (Aidellio)Commented:
<!DOCTYPE html>
<html>
	<head>
		<script src="//code.jquery.com/jquery.min.js"></script>
		<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
		<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
		<style>
		@media (min-width: 768px) {
			.navbar-header,.navbar-nav>li {
				float: none !important;
			}
		}
		</style>
		<meta charset="utf-8">
		<title>JS Bin</title>
	</head>
	<body>
		<nav class="navbar navbar-default" role="navigation">
			<!-- Begin Body -->
			<div class="container">
				<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="row">
				<div class="collapse navbar-collapse col-sm-3" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav" 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 class="col-sm-9">
					<div class="jumbotron">This is where your content goes</div>
					
				</div>
				</div>
			</div>
		</nav>
	</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mel200Author Commented:
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!
0
mel200Author Commented:
Rob Jurd, just an FYI, in the code you gave, the menu doesn't collapse.
0
RobOwner (Aidellio)Commented:
It collapses for me... how are you applying it?

Capture.JPGTO
Capture1.JPG
0
mel200Author Commented:
You're right, I apologize. I don't know why I thought it didn't...
0
RobOwner (Aidellio)Commented:
All good - just wanted to fix something if that wasn't the case! :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.