I have created a navbar but it doesn't seem to be responsive. It only works to the extent that the toggle button appears, but nothing happens when clicked. Also, the dropdown menu has no effect. I've tried various solutions mentioned on other posts but nothing seems to be working.
I've included the scripts I've linked to at the end. Please help me identify where it's going wrong
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="index.html">GrapeVine</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Areas<b class="caret"></b>
<ul class="dropdown-menu">
<li>North</li>
<li>East</li>
<li>South</li>
<li>West</li>
</ul>
</li>
<li>About</li>
</ul>
</div>
</div>
</nav>
<script src="/js/myjQuery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<script src="/js/bootsrap.min.js" type="text/javascript"></script>
I think your problem is in your script source
replace this
/js/bootsrap.min.js
to
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
You have got "bootsrap" instead of "bootstrap" in your script source:
<script src="/js/bootsrap.min.js" type="text/javascript"></script>
Related
I have a navbar from bootstrap and one of the menus is a dropdown that allows me to select a course.
The first pic is what it looks like on my desktop when I click on courses, working perfectly fine.
When I try to select it on mobile, nothing happens.
This is the navbar code
And the scripts I include.
Any insight on this issue would be much appreciated
Here yo go with a solution https://jsfiddle.net/rskte8s5/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li class="dropdown">
Course <span class="caret"></span>
<ul class="dropdown-menu">
<li>Accounting & Information System</li>
<li>Aerospace Engineering</li>
<li>Business Information Technology</li>
<li>Computer Science</li>
<li>Electrical & Computer Engineering</li>
<li>Finance</li>
<li>Math</li>
</ul>
</li>
<li class="active">Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Here is the link, I think you might find something that will work for you.
Drop-Down Menu not working on mobile devices
The toggle button is not working to reveal the collapsed elements and I do not know why. When the window is resized the toggle button is displayed but upon pressing, nothing happens. This is my first time using Bootstrap so I may have made some very obvious and ridiculous mistakes. Any help is appreciated.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="boostrap-iso">
<div class="page">
<div class="nav navbar-default">
<div class="container"></div>
<li>
<a class="logo" href="#1"></a>
</li>
<li>
<a class="cart" href="#7"></a>
</li>
<button class="navbar-toggle" data-toggle="dropdown" data-target="navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul>
<li class="products">Products
</li>
<li class="store">Store
</li>
<li class="about">About Us
</li>
<li class="discover">Discover
</li>
<li class="support">Support
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
You have at least a few problems: See the docs for the Navbar.
data-toggle="dropdown" should be data-toggle="collapse"
data-target="navHeaderCollapse" should be data-target=".navHeaderCollapse"
Fixing these two issues should allow the menu to open and close. You may want to utilize the default structure to avoid (or at least be aware of) additional issues live enclosing your toggle button inside the navbar-header class as well as the .nav & .navbar-nav classes on your menu list items. Also your container isn't doing anything currently, it should surround the navbar-header / list items.
Working Example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="boostrap-iso">
<div class="page">
<div class="nav navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
LOGO
<span class="glyphicon glyphicon-shopping-cart"></span>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li class="products">Products
</li>
<li class="store">Store
</li>
<li class="about">About Us
</li>
<li class="discover">Discover
</li>
<li class="support">Support
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
The reason that your navbar toggle button isn't working is that you've missed 3 things.
You need to change data-toggle="dropdown" to data-toggle="collapse".
You need to change data-target="navHeaderCollapse" to data-target="#navHeaderCollapse".
You need to add id="navHeaderCollapse" to the div with the collapse css class.
Once you have all these elements the toggle will work. There are some other things missing like the navbar-header div, your container being closed in the wrong spot and the first <li> elements not being within an <ul> tag.
Here is a jsfiddle with your code working: https://jsfiddle.net/4syh8nth/9/
Try using the # symbol in data-target attribute to refer on an element whose using this ID.
<button class="navbar-toggle" data-toggle="dropdown" data-target="#navHeaderCollapse">
And add an ID attribute to your .navbar-collapse element
<div id="navHeaderCollapse" class="collapse navbar-collapse">
Refer to the docs
The responsive navbar requires the collapse plugin to be included in your version of Bootstrap
Collapse plugin
You may make this as like i did by bootstrap. some classes in your code i didn't recognize its bootstrap included or not. thanks
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body >
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="collapse navbar-collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="products">Products</li>
<li class="store">Store</li>
<li class="about">About Us</li>
<li class="discover">Discover</li>
<li class="support">Support</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
I had faced the same issue.
I used data-toggle cdn in the head section and it worked in my case. For more info check the link.
Use https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css in head part of HTML.
Check whether you have used all related CDNs.
My bootstrap dropdown isn't working. I have researched this question already and all the answers I have gotten so far haven't worked for me. I've tried adding the google ajax js, it didn't help. I moved the ajax above the bootstrap mini.js, and it still didn't work. Any help?
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">DPC</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li>Builds</li>
<li>Services</li>
<li>Ratings</li>
<li>Pricing</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Social<span class="caret"></span>
<ul class="dropdown-menu">
<li>Instagram</li>
<li>Twitter</li>
<li>Facebook</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
The first thing you need to do is open the developer tools in your browser. In there you are going to find a console, this console will almost certainly be telling you that jQuery is not available. Typically this will be because you didn't include it in the correct order.
When bootstrap is correctly set up with its dependency on jQuery satisfied it will automatically bind events to dropdowns so no need for any extra code on your part.
I'm trying to use scrollspy for my fixed header nav, and it works correctly when I initially load the page.
However, if I click one of the links in the header to jump to that section, that link that I just clicked will no longer show as active when I scroll around the page past it. All the links behave this way, I don't know why they will work initially but then stop working once clicked.
<body data-spy="scroll" data-target="#myNav">
<header class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#home">Example Brand</a>
</div>
<div id="myNav" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Courses</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<h1 id="home">Home Heading</h1>
...
<div id="course" class="course-header">Courses</div>
...
<h2 id="contact">Contact Us</h2>
Also if I refresh the page, it goes back to working correctly again.
The Problem: Navbar STARTS as open. On collapse, the links still show, only the background collapses. I've made sure I'm using transitions and I've got all the bootstrap javascript in there, the bootstrap css and some of my own styling on top, but nothing that I think would affect the navbar.
What it looks like default
What it looks likes closed
My Code:
<body>
<!--Navbar -->
<div class="contactUs">
<p>
<span class="glyphicon glyphicon-phone-alt"></span> 00000000
</p>
</div>
<!-- logo -->
<!-- end logo -->
<!-- Static navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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 main-logo pull-left" href="index.html">SX Storage Essex Benfleet</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
Self Storage
</li>
<li>
Business Storage
</li>
<li>
Prices
</li>
<li>
Packaging
</li>
<li>
Contact Us
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<!-- End navbar -->
Thanks for your help, something was missing from bootstrap css. I just included the CDN. Not sure how that happened, I don't touch the bootstrap css - I'm going to put it down to zombie-mode late night keyboard mashing.