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
Solved

I need help adding nav-collapse

Posted on 2014-10-23
22
304 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
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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

856 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