Solved

I need help adding nav-collapse

Posted on 2014-10-23
22
307 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 14
  • 4
  • 3
22 Comments
 
LVL 58

Expert Comment

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

Author Comment

by:mel200
ID: 40399991
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
ID: 40400003
Looks right, make sure you have the Bootstrap Js file included as well (didn't check if you are already using it)
0
Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

 

Author Comment

by:mel200
ID: 40400019
Thanks, I'll give it a try.
0
 

Author Comment

by:mel200
ID: 40400024
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
ID: 40400027
I added this to class as well, but still not working:  navbar-toggle collapsed" data-toggle="collapse
0
 

Author Comment

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

Expert Comment

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

Author Comment

by:mel200
ID: 40409418
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
 

Author Comment

by:mel200
ID: 40413346
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
ID: 40419563
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 43

Expert Comment

by:Rob
ID: 40431668
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
ID: 40432452
Thanks, I'll try this as soon as I get to work today.
0
 

Author Comment

by:mel200
ID: 40432584
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 43

Accepted Solution

by:
Rob earned 500 total points
ID: 40441815
<!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
ID: 40442537
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
ID: 40452515
Rob Jurd, just an FYI, in the code you gave, the menu doesn't collapse.
0
 
LVL 43

Expert Comment

by:Rob
ID: 40460177
It collapses for me... how are you applying it?

Capture.JPGTO
Capture1.JPG
0
 

Author Comment

by:mel200
ID: 40460180
You're right, I apologize. I don't know why I thought it didn't...
0
 
LVL 43

Expert Comment

by:Rob
ID: 40461235
All good - just wanted to fix something if that wasn't the case! :)
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

738 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