0

I am rather new to using Bootstrap, and would love for one of you pros out there to show me where I am making my mistake.

What I am trying to accomplish: I am working on a responsive website using Bootstrap. I wish for my navbar to be fixed at the top, and when the web page is reduced to a mobile size, I would like for my navbar to show menu items when pressed.

The problem: While in mobile browser dimensions, the navbar will not show any menu items when pressed. There is no toggle.

What I have tried: I have browsed through other user's StackOverflow questions and comments, in which the majority have said to make sure the "data-toggle" matches up with the id selector following the "collapse navbar-collapse" class.

You will find that these match up. myNavbar is an id selector. Solution does not work.

 <div class="container-fluid" id="contentsOfMenu"> <div class="navbar-header page-scroll"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class"page-scroll"> <a href="#welcome" id="brandLabel"><img src="images/brainFishIconMenu.png"/></a> <a class="navbar-brand" href="#welcome" >BrainFish</a> </div> </div><!--end of navbar-header---------------------------> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav navbar-right" id="navLinkColor"> <li class="page-scroll"><a href="#aboutUs">About</a></li> <li class="page-scroll"><a href="#services">Services</a></li> <li class="page-scroll"><a href="#approach">Approach</a></li> <li class="page-scroll"><a href="#contact">Contact</a></li> </ul> </div><!--end of myNavBar--> </div><!--end of contentsOfMenu---------------------> </nav><!--end of navigation-->
Improve this question
2
  • 1
    Where is the opening tag of your nav? Commented Feb 22, 2015 at 20:43
  • There should be a tag opening as <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">. Commented Feb 22, 2015 at 20:49

3 Answers 3

Reset to default
3

You need to add the CDN's correctly else collapsing and toggling won't work

Order to be followed for adding Bootstrap 4 CDN is:

  1. jQuery
  2. Popper.js
  3. Bootstrap JS

and a sample template that is to be followed according to bootstrap 4 specifications is :

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Kulkarni Book-Stall</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> </body> </html>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

First make sure you have included bootstrap.js right after jquery script tag.Then check your navbar markup.for example:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="path/to/bootstrap.js" type="text/javascript"></script><!--required for navbar toggle-->

And

<div class="navbar navbar-inverse navbar-static-top navbar-topic"> <div class="container"> <div class="navbar-header"><!--navbar start--> <a href="#" class="navbar-brand"><!--Logo --> your site </a> <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span><!--4 icon-bar spans create the dropdown menu--> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navHeaderCollapse"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">More things <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="/html/webdesign/html.php">Html</a></li> <li><a href="">Link</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> </ul> </li> <li><a href="">Links</a></li> <li><a href="">Contact</a></li> </ul> </div>
Improve this answer

2 Comments

I rearranged the scripts where the Bootstrap script comes after the JQuery, and it worked like a charm. I never would have thought the order would have mattered, but hey, learn something new everyday. Thank you!
Glad to help.When I started using bootstrap I made the same mistake as you
0

You might be missing the javascript component of bootstrap. It is required for the menu foldout to work. Or, an exception might have halted Javascript. You can check that in your browsers debugging console.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.