Solved

I need help adding nav-collapse

Posted on 2014-10-23
22
291 Views
Last Modified: 2014-11-23
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.
0
Comment
Question by:mel200
  • 14
  • 4
  • 3
22 Comments
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Have you been through the docs
It's exactly the same for a vertical menu
0
 

Author Comment

by:mel200
Comment Utility
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
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Looks right, make sure you have the Bootstrap Js file included as well (didn't check if you are already using it)
0
 

Author Comment

by:mel200
Comment Utility
Thanks, I'll give it a try.
0
 

Author Comment

by:mel200
Comment Utility
Hmm. that didn't work, the menu disappears on a smaller screen, and it loses some of its styling on a large screen.
0
 

Author Comment

by:mel200
Comment Utility
I added this to class as well, but still not working:  navbar-toggle collapsed" data-toggle="collapse
0
 

Author Comment

by:mel200
Comment Utility
I do have the js: <script src="js/bootstrap.min.js"></script>
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
 

Author Comment

by:mel200
Comment Utility
I still haven't made this work, but I will try a couple of other things tomorrow.
0
 

Author Comment

by:mel200
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:mel200
Comment Utility
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
 

Author Comment

by:mel200
Comment Utility
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
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
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
 

Author Comment

by:mel200
Comment Utility
Thanks, I'll try this as soon as I get to work today.
0
 

Author Comment

by:mel200
Comment Utility
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
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
Comment Utility
<!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
 

Author Closing Comment

by:mel200
Comment Utility
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
 

Author Comment

by:mel200
Comment Utility
Rob Jurd, just an FYI, in the code you gave, the menu doesn't collapse.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
It collapses for me... how are you applying it?

Capture.JPGTO
Capture1.JPG
0
 

Author Comment

by:mel200
Comment Utility
You're right, I apologize. I don't know why I thought it didn't...
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
All good - just wanted to fix something if that wasn't the case! :)
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now