Bootstrap 4 navbar not collapsing on large screen
You need to include Popper as per the Getting Started Docs.
Use these for your scripts instead.
<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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
Updated working Fiddle: https://jsfiddle.net/u7v5jba9/1/
Advice: In future, always open the dev inspector console in your browser to find any error messages.
Navbar not collapsing with Bootstrap
Yes follow the instructions from Betty St (include responsive css, bootstrap-collapse.js and the Transitions plugin update: (bootstrap-transition.js) and jQuery). You need to add a button / link which triggers the collapse. This tags get the attributes: data-toggle="collapse" data-target=".nav-collapse" where data-target can be any css selector. Put your nav between the tag selected under data-target, see: http://bootply.com/62921
html:
<div class="container">
<div class="masthead">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="/" class="">Home</a></li>
<li><a href="goud-zilver.html">Oud goud en zilver</a></li>
<li><a href="koersen.html">Officiële koersen</a></li>
<li><a href="webshop/" target="_blank">Webwinkel</a></li>
<li><a href="diversen.html">Diversen</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
</div>
</div>
</div><!-- /.navbar -->
</div>
</div>
update
Your code is missing the Transitions plugin (bootstrap-transition.js) required by the Collapse plugin. More important you didn't include jQuery.
Now it should work see: http://plnkr.co/l66QqCftGNsaG0xkBrUf
javascript includes:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-collapse.js"></script>
Note: Consider to include the compiled (or minified) version of the complete javascripts:
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
You also need to change the style after collapsing:
.navbar .in .nav li {
display: block;
float: none;
width:100%;
}
Bootstrap 4 navbar not working properly on small screen sizes
Add navbar-light or navbar-dark (for a dark background) to your navbar - these classes are responsible to add the hamburger. See demo below:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" /><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" /><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-light navbar-expand-lg primary"> <a class="navbar-brand" href="/">Blazor Finances</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div id="navbarNavDropdown" class="navbar-collapse collapse"> <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> </ul> <ul class="navbar-nav"> <li class="nav-item"> <a id="login-register-btn" class="btn btn-primary primary" href="/login">Login/Register</a> </li> </ul> </div> </nav>Bootstrap navbar collapse button on the big screens?
Remove the navbar-expand-* class that will work for you
<meta name="viewport" content="width=device-width, initial-scale=1" /><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Collapsing Always<nav class="navbar 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>
Not Collapsing<nav class="navbar navbar-expand-sm 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>Bootstrap 4 nav not expanding after clicking the toggler
Just put jquery-3.3.1.slim.min.js before the bootstrap.min.js
<html>
<head> <meta charset="utf-8"> <title>Admin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"></head>
<body><nav class="navbar navbar-light navbar-expand-lg"> <div class="container"><button class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#navbarNavDropdown"> <span class="navbar-toggler-icon"></span></button>
<div id="navbarNavDropdown" class="collapse navbar-collapse" ><ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#Pricing">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="#About">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#FAQ">FAQ</a> </li> <li class="nav-item"> <a class="nav-link" href="#Blog">Blog</a> </li> <li class="nav-item"> <a class="nav-link" href="#Contact">Contact</a> </li></ul></div> </div></nav></body>
</html>bootstrap collapse navbar not working. whenever i press the icon in a smaller screen the menu does not open, how do i fix?
Assuming you are using Bootstrap 5, Some attributes are changed compared to bootstrap 4.
Change your code like this
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a href="./index.html" class="navbar-brand"><img src="./images/StoreLogo.png" alt="Home" width="70px" height="auto"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="./index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./AboutUs.html">About Us</a>
</li>
</ul>
</div>
</div>
</nav>
Click here for more Info Documentation
Bootstrap 4 navbar isn't responsive and stays opened when styled
You have to remove the margin from your anchor tags (set it to margin: 0 auto;, and use justify-content: space-between; on your navbar-nav. I also added flex-grow: 1; to the navbar-nav
I added this CSS:
.navbar-nav{
justify-content: space-between;
flex-grow: 1;
}
Please check the codepen.
https://codepen.io/anon/pen/rZKEvq
Navbar not filling full screen
Either you need to remove .container-fluid or add to it .p-0 as .container-fluid is adding additional padding to the div. Please try the below snippet.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-expand-sm navbar-dark bg-dark "> <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" 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>
</ul>
</div></nav>Related Topics
Difference Between Textcontent VS Innertext
How to Call Reduce on an Array of Objects to Sum Their Properties
Get Hours Difference Between Two Dates in Moment Js
What Does the Plus Sign Do in '+New Date'
Disabling and Enabling a HTML Input Button
Dynamically Set Property of Nested Object
Global Variables in JavaScript Across Multiple Files
Prevent a Webpage from Navigating Away Using JavaScript
Recursively Looping Through an Object to Build a Property List
JavaScript Get Xpath of a Node
Why Is My Infinite Loop Blocking When It Is in an Async Function
What Are the Differences Between Deferred, Promise and Future in JavaScript
What Does the "|" (Single Pipe) Do in JavaScript
Get Mouse Wheel Events in Jquery
What Are Some Good Ways to Prevent People from Copying My Source Code