• 0

[bootstrap] Menu won't toggle


Go to solution Solved by pqt,

Question

Syanide

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 post
Share on other sites

7 answers to this question

Recommended Posts

  • 0
gohpep

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

Link to post
Share on other sites
  • 0
Syanide

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

 

Yes.

Link to post
Share on other sites
  • 0
gohpep

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

Link to post
Share on other sites
  • 0
Syanide

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 post
Share on other sites
  • 0
Syanide

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

Link to post
Share on other sites
  • 0
pqt

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 post
Share on other sites
  • 0
Syanide

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 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
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By News Staff
      Pay What You Want for this 20-Course Programming Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can Pay What You Want for the The 20-Course Programming Bundle. From game development to making responsive apps, this 20-course collection has everything you need to start coding.



      What's the deal?
      With the Pay What You Want bundles, you can get something incredible for as little as you want to pay. And if you beat the average price, you’ll receive the fully upgraded bundle! Included in this Pay What You Want deal, are the following courses:

      Pay What You Want (as little as $1) for the following course:

      Image Processing with Python: Build an Instagram-Style Filter
      Develop a Photo Filter Editor from Scratch & Master Your Understanding of Matrices, Color Models & More

      Beat the average price to get the following courses as well:

      Azure Deployment for Node.js Applications
      Discover How to Deploy Your Node.js Apps to Microsoft Azure & Make Them Accessible Online

      MongoDB for Beginners
      Get Acquainted with MongoDB & Discover How to Manage Data Operations Like a Pro

      Node.js For Beginners: Create Server-Side Apps with JavaScript
      Learn How to Build Fast Web Applications with Node.js, the Server-Side Solution for JavaScript

      Intro to Next.js
      Get started with the Minimalist Framework That Allows You to Build Static, Server-Rendered React Apps

      Intro to Bootstrap
      Learn Bootstrap, the Secret to Quickly Creating Professional & Attractive Websites + Web Apps

      Create Interactive Pages with Javascript & the DOM API
      Explore the DOM API, HTML5 & Advanced JavaScript Concepts by Building Three Projects

      JavaScript Programming: Learn by Making a Mobile Game
      Dive into JavaScript's Core Concepts By Building a Game From Scratch

      HTML & CSS Course
      Learn HTML & CSS from Scratch by Creating a Responsive Landing Page

      AWS Deployment for Node.js Applications
      Discover How to Deploy Your Node.js Apps to AWS & Make Them Accessible Online

      The Complete HTML5 Mobile Game Development Course
      Use the Phaser HTML5 Framework & JavaScript Technologies to Build Cross-Platform Games

      Master Unity Game Development: Beginner's Bootcamp
      Learn Unity & C# by Creating a 3D Multi-Level Platformer Game

      Master Unity Mobile Game Development
      Learn the Quirks of Mobile Game Development with Unity

      Unity Game Development: Build a First-Person Shooter
      Master Unity by Building Your Own Version of Doom or Call of Duty

      Data Manipulation with Pandas
      Learn How to Read & Manipulate Data + Prepare It for Analysis Using the Pandas Library

      The Complete Python Data Visualization Course
      Master the Major Plotting Libraries Matplotlib, Seaborn & Bokeh + Use Them to Create Beautiful Plots

      Learn Python 3 by Making a Game
      Get up to Speed with Python by Creating Your Very Own Game

      Build a Tower Defense Game with Phaser 3
      Master the Skills Needed to Build a Complete Tower Defense Game Using Phaser 3

      Numpy Matrices & Vectors
      Take Advantage of the Numpy Library & Build Powerful + Functional Arrays and Matrices

      The Complete Responsive Web Design Course
      Learn How to Build Professional Websites That Work Across Different Devices & Platforms

      Good to know
      Certification of completion included Length of time users can access this course: lifetime Redemption deadline: redeem your code within 30 days of purchase Here's the deal:
      The bundle represents an overall retail value of $3,732 But you can Pay What You Want for the unlocked courses (as little as $1) Beat the average price and you'll take home the entire bundle. Qualify for the giveaway!
      Beat the Leader's price and get entered into the epic giveaway—plus get featured on the leaderboard!

      >> Pay What You Want for The 20-Course Programming Bundle <<
      See other Pay What You Want deals. This is a time-limited offer that ends soon.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:



      The Win Your Dream 2020 Tesla Model 3 Giveaway 20% off Ivacy VPN subscription with coupon code IVACY20 NordVPN subscription at up to 68% off for a 2 year plan Private Internet Access VPN subscription at up to 71% off Unlocator VPN or SmartDNS unblock Geoblock with 7-day free trial Subscribe to Neowin for $14 a year, or $28 a year for Ad-Free experience Disable Sponsored posts · Neowin Deals · Free eBooks · Neowin Store

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • By News Staff
      Bootstrap: Related Tools & Skills - free eBook
      by Steven Parker

      Claim your complimentary copy for free, before the offer expires.



      What's it about?
      We’ve scoured the web for Bootstrap tools and playgrounds and shared with you only the very best out there.



      Web designers and developers operate in a great industry. Our expertise and access to affordable development resources gives us the ability to do something unique — something which is found in few (if any) industries: the ability to release tools for other web designers and developers.

      Tools for people like us are plentiful. Many of them are free, some are paid. All of them are awesome.

      There are tools and playgrounds for almost everything — including Bootstrap. Let’s review the best of them.

      How to get it
      Please ensure you read the terms and conditions to claim this offer. Complete and verifiable information is required in order to receive this free offer. If you have previously made use of these free offers, you will not need to re-register. While supplies last!

      >> Bootstrap: Related Tools & Skills - free eBook <<
      Offered by SitePoint, view their other free resources. Limited time offer.

      Not for you?
      That's OK, there are other free eBooks on offer you can check out here, but be aware that these are all time-limited offers. If you are uncomfortable sharing your details with a third-party sponsor, we understand. Or via our preferred partner:

      How can I disable these posts? Click here.

      Disclosure: A valid email address is required to fulfill your request. Complete and verifiable information is required in order to receive this offer. By submitting a request, your information is subject to TradePub.com's Privacy Policy.

    • By News Staff
      Save 98% off this Ultimate Web Coding for Everyone Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 98% off* this Ultimate Web Coding for Everyone Bundle. Dive deeper in the world of web coding with 8 courses on Python, Ruby, Javascript, PHP, HTML, Bootstrap 4, MySQL and Node.js



      What's the deal?
      This deal consists of the following courses:

      Python Programming for Everyone
      Learn Basic to Advanced Python 3 Programming in Only an Hour, Python 3 Download Included! Ruby Programming for Everyone
      Get Up to Speed with This Beginner-Friendly Language in Just One Hour JavaScript Programming for Everyone
      Learn to Code Javascript Like a Professional Programmer Intro to PHP for Web Development
      Learn PHP for Web Development & Become a Backend Coder in No Time HTML & Bootstrap CSS Programming for Everyone
      Learn to Build Awesome Websites Using HTML & the Bootstrap CSS Framework CSS Bootstrap 4 for Everyone
      Learn the Latest Version of Bootstrap 4 from Start to Finish & Build 3 Website Projects Intro to MySQL with Node.js: Learn to Use MySQL with Node
      Learn How to Use MySQL Databases with Node.js & Explore What These Databases Can Do Node.js Absolute Beginners Guide: Learn Node from Scratch
      Learn Node.js to Build Websites & Host Them Live on Heroku Webhosting Good to know
      Length of time users can access this course: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and instructor info, click here.

      What's the benefit?
      This Ultimate Web Coding for Everyone Bundle normally costs* $1,600, but you can pick it up for just $29 for a limited time - that represents a saving of $1,571 (98%) off.

      >> Get this deal, or learn more about it <<
      See all discounted Online Courses. This is a time-limited offer.

      Save even more!
      Stick with Neowin Deals and earn credit or even deeper discounts.

      Check out our recent deals here or on the Neowin Deals site. For every $25 spent, you get $1 credit added to your Neowin Deals account. Refer the deal for $10 credit via social media or email and if it results in a purchase of at least $10, you'll get $10 credit added to your account. 10% off for first-time buyers: be sure not to dismiss the popup offer to subscribe to email updates on the deals page in order to profit! Not for you?
      If this offer doesn't interest you, why not check out our giveaways on the Neowin Deals website? There's also a bunch of freebies you can check out here.

      Miscellany and the fine print!
      In some cases, such as with Online Courses, a store credit refund within 15 days of purchase is possible if you are unhappy with it; this does not apply to all deals, so please do check the terms on the page before making a purchase.

      Check our other recent deals, before they expire, or our preferred partner software for Private Internet Access and NordVPN deals.

      How can I disable these posts? Click here.

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs. *Values or percentages mentioned above are subject to StackCommerce's own determination of retail pricing.

    • By News Staff
      Get the Bootstraptor Ultimate Bootstrap Bundle for only $39
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 97% off the Bootstraptor Ultimate Bootstrap Bundle. Seamlessly create mobile-friendly sites with 300+ website templates and themes plus a drag-and-drop website builder.



      What's the deal?
      Start building responsive, mobile-first sites with Bootstraptor's Ultimate Bootstrap Bundle! Featuring more than 300 website Bootstrap templates and themes, plus the BLOCKS drag-and-drop website builder, this collection sets you up with a treasure trove of tools and resources to easily create professional, responsive websites at blazing speeds.

      Access 300+ Bootstrap templates & themes
      Easily create professional sites w/ a drag-and-drop builder
      Build your next Bootstrap site in minutes

      Good to know
      Includes Essential Bootstrap Bundle with 130 Templates and extended license Includes Bootstrap 4 Starter Kit Pro (100+ templates) and extended license Includes BLOCKS 3.2 Bootstrap Builder Pro License with lifetime updates Redemption deadline: redeem your code within 30 days of purchase For full details, terms, and instructor info for the above courses, click here.

      What's the benefit?
      The Bootstraptor Ultimate Bootstrap Bundle normally costs $1,712, but you can pick this up for just $39 for a limited time, that's a saving of 97% ($1,673) off the normal price!

      >> Learn more or Purchase now <<
      See all discounted Online Courses on offer. This is a time-limited deal.

      Save even more!
      Stick with Neowin Deals and earn credit or even deeper discounts.

      Check out recent deals here or on the Neowin Deals site. For every $25 spent, you get $1 credit added to your Neowin Deals account. Refer the deal for $10 credit via social media or email and if it results in a purchase of at least $10, you'll get $10 credit added to your account. 10% off for first-time buyers: be sure not to dismiss the popup offer to subscribe to email updates on the deals page in order to profit! Not for you?
      If this offer doesn't interest you, why not check out our giveaways on the Neowin Deals website? There's also a bunch of freebies you can check out here.

      Miscellany and the fine print!
      In some cases, such as with Online Courses, a store credit refund within 15 days of purchase is possible if you are unhappy with it; this does not apply to all deals, so please do check the terms on the page before making a purchase.

      Check our other recent deals, before they expire, or our preferred partner software.

      How can I disable these posts? Click here.

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerces privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs. *Values or percentages mentioned above are subject to StackCommerces own determination of retail pricing.

    • By News Staff
      This Front-End Developer Bundle with certification is discounted to just $41
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where for only a limited time you can save 97% off this Complete Front-End Developer Bundle. Start building websites from scratch with 66 hours of training in JavaScript, CSS, Adobe Design Tools and more.



      What's the deal?
      This deal consists of the following courses:

      Learn CSS Web Design & Development
      Learn How to Apply CSS Styling to HTML Elements Complete Bootstrap 4 Course: Build 5 Projects From Scratch
      Get Familiar with Bootstrap 4, One of the Best Tools for Rapid Site Design & Development Adobe Illustrator CC 2018 Master Class
      Master the Industry-Standard Vector Graphics Application Step-by-Step HTML & CSS for Absolute Beginners
      Create Your Own Web Pages with HTML & CSS JavaScript for Beginners
      Learn JavaScript Through Whiteboard Videos, Coding In the Browser & Building a Website JavaScript Specialist Designation
      Study to Pass the JavaScript Specialist Designation Exam React for Absolute Beginners
      The Complete Guide to Professional Development Using React Mastering Mobile App Design With Sketch 3
      The Beginner's Guide to Awesome Mobile App Development Adobe Photoshop CC: Your Complete Beginner's Guide
      The World's Most Popular Photo Editing Software Taught to You From A to Z Good to know
      Length of time users can access courses: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For full details, terms, and instructor info for the above courses, click here.

      What's the benefit?
      This Complete Front-End Developer Bundle normally costs $1,419.97, but you can pick this up for just $41 for a limited time, that's a saving of 97% ($1,378.97) off the normal price!

      >> Learn more or Purchase now <<
      See all discounted Online Courses on offer. This is a time-limited deal.

      Save even more!
      Stick with Neowin Deals and earn credit or even deeper discounts.

      Check out recent deals here or on the Neowin Deals site. For every $25 spent, you get $1 credit added to your Neowin Deals account. Refer the deal for $10 credit via social media or email and if it results in a purchase of at least $10, you'll get $10 credit added to your account. 10% off for first-time buyers: be sure not to dismiss the popup offer to subscribe to email updates on the deals page in order to profit! Not for you?
      If this offer doesn't interest you, why not check out our giveaways on the Neowin Deals website? There's also a bunch of freebies you can check out here.

      Miscellany and the fine print!
      In some cases, such as with Online Courses, a store credit refund within 15 days of purchase is possible if you are unhappy with it; this does not apply to all deals, so please do check the terms on the page before making a purchase.

      Check our other recent deals, before they expire, or our preferred partner software.

      How can I disable these posts? Click here.

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerces privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs. *Values or percentages mentioned above are subject to StackCommerces own determination of retail pricing.