• 0

[bootstrap] Menu won't toggle


Question

Annoying problem, and I am probably overseeing something extremely stupid, but I'm puzzled.

 

I have this menu structure:

		<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="container">
			
				<div class="navbar-header">
				  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
				</div><!-- end navbar-header -->
				
				<div class="navbar-center navbar-brand">
					<a href="index.html"><img src="images/logo.svg" alt="Logo" class="logo"></a>
				</div><!-- end navbar-brand -->
				
				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="navbar-collapse-1">
					<ul class="nav navbar-nav navbar-left">
						<li class="active"><a href="#about">About</a></li>
						<li><a href="#team">Team</a></li>
						<li><a href="#interests">Interests</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li><a href="#process">Process</a></li>
						<li><a href="#faq">FAQ</a></li>
						<li><a href="#contact">Contact</a></li>
					</ul>
				</div><!-- /.navbar-collapse -->
				
			</div><!-- end container -->
			
		</nav><!-- end navigation -->

The responsive menu doesn't work. It will collapse the menu properly, but clicking the hamburger menu button again won't do anything and I'm effectively stuck with the expanded navigation.

 

Please help.

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

Found out what the issue was, I had jquery 1.11.2 linked, changed it to 1.8.2, now it works.

 

Bootstrap checks the jquery version being used and will deliberately throw an error if it's not one that supports bootstraps functions, if you're on chrome use the Inspect Element tool and it will show any errors or warnings.

Link to comment
Share on other sites

  • 0

I just tested it myself on bootply, it works there, but it still doesn't work on the site I'm working on.

 

EDIT: Checked with a random bootstrap nav example, it doesn't work, so it's not due to the navigation syntax, must be something else on page screwing it up.

Link to comment
Share on other sites

  • 0

Bootstrap checks the jquery version being used and will deliberately throw an error if it's not one that supports bootstraps functions, if you're on chrome use the Inspect Element tool and it will show any errors or warnings.

 

Thanks. I'll mark your post as the one who solved it, just because it might come in handy in the future. Huge thanks to mastercoms for looking into it as well.

Link to comment
Share on other sites

This topic is now closed to further replies.