Melody Scott
asked on
I need help adding nav-collapse
Hi, everyone, on this test site: mkmeals.com/responsive/ind ex.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.
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.
ASKER
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?
I make it: <ul class="navside2 nav-stacked2 ulside collapse navbar-collapse" id="sidebar">
Is that right?
Looks right, make sure you have the Bootstrap Js file included as well (didn't check if you are already using it)
ASKER
Thanks, I'll give it a try.
ASKER
Hmm. that didn't work, the menu disappears on a smaller screen, and it loses some of its styling on a large screen.
ASKER
I added this to class as well, but still not working: navbar-toggle collapsed" data-toggle="collapse
ASKER
I do have the js: <script src="js/bootstrap.min.js"> </script>
You need your mobile version of the menu
Then your menu block should start like this
<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>
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">
ASKER
I still haven't made this work, but I will try a couple of other things tomorrow.
ASKER
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.
ASKER
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.
ASKER
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>
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.
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.
ASKER
Thanks, I'll try this as soon as I get to work today.
ASKER
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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!
ASKER
Rob Jurd, just an FYI, in the code you gave, the menu doesn't collapse.
ASKER
You're right, I apologize. I don't know why I thought it didn't...
All good - just wanted to fix something if that wasn't the case! :)
It's exactly the same for a vertical menu