• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

[bootstrap] Menu won't toggle

Question

Syanide    614

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.

Share this post


Link to post
Share on other sites

7 answers to this question

Recommended Posts

  • 0
pqt    275

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.

Share this post


Link to post
Share on other sites
  • 0
gohpep    434

Do you have bootstrap.js and jquery on your page?

Share this post


Link to post
Share on other sites
  • 0
Syanide    614

Do you have bootstrap.js and jquery on your page?

 

Yes.

Share this post


Link to post
Share on other sites
  • 0
gohpep    434

I just tested it, and it works fine for me.

Share this post


Link to post
Share on other sites
  • 0
Syanide    614

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.

Share this post


Link to post
Share on other sites
  • 0
Syanide    614

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

Share this post


Link to post
Share on other sites
  • 0
Syanide    614

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.