Bootstrap Navbar not expanding with Iron Router

help
1

Hello there, my bootstrap navbar is not expanding and I am stuck as to why.

My code for the navbar is just like the example docs:

<template name="navbar">
	<nav class="navbar navbar-default">
		<!-- Start of navbar -->
		<div class="container-fluid">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" id="hamburgButton" data-toggle="collapse" data-target="#hamburg" aria-expanded="false">
					<!-- Toggle Navigation -->
					<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="/CC">ToastCalculator <!-- Site title -->
				</a>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse" id="hamburg">
				<!-- Menu itmes -->
				<ul class="nav navbar-nav">
					<li><a href="/CC">CC Calculator <span class="sr-only">(current)</span></a></li>
					<li><a href="/CL">CL Calculator</a></li>
					<li><a href="/About">About</a></li>
					<li><a href="/Contact">Contact</a></li>
				</ul>

			</div>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container-fluid -->
	</nav>
</template>

I even tried running a hack way of doing it (by removing the collapse class which makes it show up) but that didn’t work either

Template.navbar.events({ //responses to events
	'click #hamburgButton': function () {
		$('#hamburg') toggleClass("collapsed")
	}
});

I’m stuck :slight_frown:

Any help would be greatly appreciated

2

Has anybody else dealt with this before?

3

Haven’t worked with bootstrap in quite a while, but I’d check out the demo here: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h

4

The thing is that mine is just like the one there. It was working perfectly before I put in the router and I haven’t changed the actual HTML. Is there a workaround you know to make the hamburger work?

Why isn’t my workout solution working?

5

Not quite so easy to diagnose with what you’ve provided. If you copy and paste the code from the demo I linked into your template, and it doesn’t work, then my guess would be that your bootstrap js isn’t loaded? If you submit a repo, I can take a look but there isn’t much to go on.

6

Hi I am pretty sure that Bootstrap is loading as bootstrap styling is being applied and it does turn to a hamburger when you make it a current size.

The repo is here: https://github.com/a22munir/ToastCalc

Thanks a bunch!

7

You have the css file in your repo, but I don’t see the js anywhere, nor do I see a bootstrap package. I see peppelg:bootstrap-3-modal, but that obviously doesn’t have the bootstrap js code.

You can repro this by doing the following in the browser console:

bootstrap_enabled = (typeof $().modal == 'function'); // false

To confirm, run the following in your browser console:

$.getScript('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', function () {
  console.log('got it')
});

Then the hamburger works.

Either grab a bootstrap package or load the script on startup.

1 Like
8

Hi, the js files are in Client => JS in the repo

I tried doing what you said by results are different. I’m rather confused why.

Running meteor list shows that bootstrap is installed

956Ă—469 21.8 KB

And running the running the command you said returns true and the hamburger still doesn’t work

945Ă—427 48.3 KB

9

You added the package and js files after I grabbed the repo and posted my response, so that’s why you are seeing different results.

Anyway, now that you have the js, you are just missing id="#hamburg" on your navbar div.

1 Like
10

I added the package but it still didn’t work so I reposted but the js files were always there. Would be hard to run a meteor application without js :stuck_out_tongue:

I got rid of the id and the nav template because I thought it would work without it now that bootstrap is installed (I’m still very confused about why it got uninstalled b/c I had it before…maybe I meteor removed it in my sleep) but it still isn’t

Thanks for all your help btw.

11

No worries. So just to confirm, you did get it working, yeah?

1 Like
12

Yes it works now.

Thank you!

1 Like