so i have got this code ( the data-toggle and data-target are black in my n++ also i used data target instead of data-target which shows me red..)
i want to make my page responsive for mobile users and large desktop users.
but when i zoom in to the display, there is on the right top corner the button which should open the drop down menu, but it doesn't.
<html>
<head>
<title>Built your Website</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<!--jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<nav>
<nav class="navbar navbar-default navbar-static-top"> <!-- color, statisch-->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data target=".navbar-collapse "> <!-- button, navbar mit dropmenu wenn bildschirm zu klein-->
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <!-- creates 3 lines in the toggle navigation when screen too little -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">TAIL
<!-- <span class="glyphicon glyphicon-home" id="homeIcon"></span> -->
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<!--<li><a class="navbar-brand" href="index.php">TAIL</a></li>-->
<li class="dropdown"> <a href="templates.php" class="dropdown-toggle" data-toggle="dropdown" >Templates</a></li>
<li class="dropdown"> <a href="pricing.php" class="dropdown-toggle" data-toggle="dropdown" >Pricing</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="register.php" class="dropdown-toggle" data-toggle="dropdown" >Sign Up
<span class="glyphicon glyphicon-user" id="sserIcon"></span>
</a>
</li>
<li class="dropdown">
<a href="login.php" class="dropdown-toggle" data-toggle="dropdown" >Log In
<span class="glyphicon glyphicon-log-in" id="logIcon"></span>
</a>
</li>
</ul>
</div>
</div>
</nav>
You have an missing dash in your code.
Instead of this:
data target=".navbar-collapse "
do this:
data-target=".navbar-collapse "
And then it works.
Related
I'm using bootstrap 3.3.7 and my navbar is not collapsing on smaller devices. Navbar does appear, but clicking on the navbar-toggle button does not bring any options up.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" 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 href="index.html" class="navbar-brand">
<div class="orange"><i class="fas fa-football-ball"></i> Fantasy</div>
</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo">
<ul class="nav navbar-nav">
<li><a class="active" href="index.html">Home</a></li>
<li>History</li>
<li>Picks & Busts of the Week</li>
<li>Important Dates/Announcements</li>
<li>Chat/Blog</li>
</ul>
</div>
</div>
</nav>
It does appear, but clicking on it does not bring any options up
The problem might be mainly due to the fact that you are not loading the required JavaScript files properly. You can grab the CDN via documentation. Don't forget to add the Jquery CDN since you are using version 3.3.7 and it is not mentioned properly in the documentation. . Add these script tags to your HTML
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--Latest Jquery CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Here is a working example.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" 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 href="index.html" class="navbar-brand">
<div class="orange"><i class="fas fa-football-ball"></i> Fantasy</div>
</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo">
<ul class="nav navbar-nav">
<li><a class="active" href="index.html">Home</a></li>
<li>History</li>
<li>Picks & Busts of the Week</li>
<li>Important Dates/Announcements</li>
<li>Chat/Blog</li>
</ul>
</div>
</div>
</nav>
<!--Latest Jquery CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
try this if you are using boostrap
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
I make two navbars but it doesnt work correctly. Do you have any advices ? It looks like this, but after minimizing I am missing HOME MIBs and LIBRARY tabs. I think that upper menu covers bottom menu.
I would like to be able to see all tabs after clicking on the menu button.
Here is my code
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<!DOCTYPE html>
<html lang="en">
<head>
<title>my site</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
padding-top: 50px;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<div class="navbar-header"><a class="navbar-brand" href="#">LOGO</a></div>
<button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li>Friends</li>
<li>Messages</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Account <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Settings</li>
<li>Stats</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">MIB's <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>my MIB's</li>
<li>my feedback's</li>
<li>my comment's</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Library <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Standard</li>
<li>Random</li>
<li>Custom</li>
</ul>
</li>
<li>Badges</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Help <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>FAQ</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>my site</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
padding-top: 50px;
}
#media only screen and (max-width: 550px) {
body {
padding-top: 0px;
}
.navbar-fixed-top {position:static;}
.navbar{margin-bottom:0;}
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<div class="navbar-header"><a class="navbar-brand" href="#">LOGO</a></div>
<button class="navbar-toggle" type="button" data-target=".navbar-collapse1" data-toggle="collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-collapse1">
<ul class="nav navbar-nav pull-right">
<li>Friends</li>
<li>Messages</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Account <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Settings</li>
<li>Stats</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-target=".navbar-collapse2" data-toggle="collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-collapse2">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">MIB's <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>my MIB's</li>
<li>my feedback's</li>
<li>my comment's</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Library <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Standard</li>
<li>Random</li>
<li>Custom</li>
</ul>
</li>
<li>Badges</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Help <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>FAQ</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
Use this. it is working perfact
This question already has answers here:
Bootstrap 4 - Toggle button not working [duplicate]
(3 answers)
Closed 4 years ago.
I just created a new file and copy and pasted the Bootstrap Starting Code from its official site.
But the problem is whenever I minimize the browser screen to test how this menu works in small devices, the menu toggle button does not seem to be working.
As in this image shows, when I click on the button, it does not collapse and shows the menu items, somehow:
So what's wrong with this menu?
Code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<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="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse topMenu" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</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" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</body>
</html>
Try this code - if you post your code then I can see what your doing. Do you definitely have the class="navigation-toggle" and data-toggle="collapse" and data-target="#navigation-id" (which links to your nav menu - this needs to be done to sync the two up.
Use the CDN
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<header class="navigation navbar" role="navigation">
<div class="container-fluid">
<div class="row">
<header class="navigation navbar" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<img class="navbar-brand contini-logo" src="contini-logo.jpg">
</div>
<nav class="col-sm-8">
<div class="row">
<div class="col-sm-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="contini-navigation">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div> <!--Navbar header end - wierd since it is a wrapper -->
<div class="collapse navbar-collapse" id="contini-navigation">
<ul class="nav navbar-nav" id="main-menu">
<li><a>Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Our Restaurants<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Contini George Street</li>
<li>Canonball Restaurant & Bar</li>
<li>The Scottish Cafe</li>
</ul>
</li>
<li><a>About</a></li>
<li><a>Events</a></li>
<li><a>What's On</a></li>
<li><a>News</a></li>
<li><a>Gifts</a></li>
</ul>
</div> <!-- id contini navigation -->
</div> <!-- col-sm-12 -->
</div> <!-- row -->
<!-- <div class="row"> ===== DON"T Understand what they have done on the original site here =====
<div class="col-sm-12">
</div>
</div> -->
</nav>
</div> <!-- row -->
</div> <!-- container -->
</header>
I'm trying to get accounts:ui loginButtons to right align in a Bootstrap Navbar. Functionality is fine, but no matter what I try, it won't go on the right. Currently, it's on the left after the Upload button. Any help appreciated.
html:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">REVUME</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">CATEGORIES <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>DIGITAL ART</li>
<li>DRAWING</li>
<li>GRAPHIC DESIGN</li>
<li>ILLUSTRAION</li>
<li>PAINTING</li>
<li>PHOTOGRAPHY</li>
<li>UI/UX</li>
</ul>
</li>
<button type="button" class="btn btn-default navbar-btn">UPLOAD</button>
<span class="glyphicon glyphicon-user"></span> {{> loginButtons align="right"}}
</ul>
</div>
</div>
</nav>
Try this it will work:)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<link href="https://fonts.googleapis.com/css?family=Catamaran:100|Luckiest+Guy|Quicksand:300|Asap:700|Montserrat:700|Open+Sans|Roboto|Signika:700" rel="stylesheet"/>
</head>
<style type="text/css">
#right-button {
margin-right: 20px;
}
#glyph {
}
</style>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">REVUME</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">CATEGORIES <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>DIGITAL ART</li>
<li>DRAWING</li>
<li>GRAPHIC DESIGN</li>
<li>ILLUSTRAION</li>
<li>PAINTING</li>
<li>PHOTOGRAPHY</li>
<li>UI/UX</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><button id="right-button" type="button" class="btn btn-default navbar-btn navbar-right">UPLOAD</button></li>
<li>
<span id="glyph" class="glyphicon glyphicon-user" ></span> </li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Use the class navbar-right with the element that you are trying to align at the right side.
I have a navigation bar and when I make the screen size smaller, the list items overlap into the left of the navigation where there is the logo instead of keeping to their positions. Here is the HTML code:
<header>
<div class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-target="navbar-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span> <span class="icon-bar"> </span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img id="indexlogo" width="20%" alt="logo" src="img/siluxLogo1.png" >
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" >
<li >
<a>hello and welcome</a>
</li>
<li >
<a id="date"></a> <!-- JS which displays date and year -->
</li>
<li >
<a id="feed"></a> <!-- RSS feed ticker -->
</li>
<li class="active">
Home
</li>
<li>
About Us
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
</header><!-- end header -->
Can someone please point out where I am going wrong or what I am missing. I have the viewport meta tag and the other parts of the page are responsive.
Coppy code below and paste your editor.
You try it work fine.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<header>
<div class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span> <span class="icon-bar"> </span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img id="indexlogo" width="20%" alt="logo" src="img/siluxLogo1.png" >
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" >
<li >
<a>hello and welcome</a>
</li>
<li >
<a id="date"></a> <!-- JS which displays date and year -->
</li>
<li >
<a id="feed"></a> <!-- RSS feed ticker -->
</li>
<li class="active">
Home
</li>
<li>
About Us
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
</header><!-- end header -->
</body>
</html>
adding an id just before the unordered list would also fix it.
<div id="navbar" class="navbar-collapse collapse">...</div>
and then set data-target="#navbar"
also, you should add this class to your button. class="collapsed"
Here is an example from my own site, which works
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
You also don't need container-fluid
// DROP IN THIS AND TELL ME IF IT WORKS
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top mega navbar-trans navbar-fw">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Navbar Links -->
<div id="navbar" class="navbar-collapse collapse page-scroll navbar-right">
<ul class="nav navbar-nav">
<li>Home<span class="sr-only"></span></li>
<li>About<span class="sr-only"></span></li>
<li>Services<span class="sr-only"></span></li>
<li>Portfolio<span class="sr-only"></span></li>
<li>Pricing<span class="sr-only"></span></li>
<li>Contact<span class="sr-only"></span></li>
</ul>
</div>
</nav>