Solved

I need help adding nav-collapse

Posted on 2014-10-23
22
309 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
What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

 

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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

705 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