when i open my html file i don't find the collapse button on the navbar. The button for collapsing does not appear
here is my html code :
<!DOCTYPE html>
<html>
<head>
<title>BoostUp - Boostez vos projets</title>
<link href="/assets/css/boostrap/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./assets/css/heroes.css">
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/assets/img/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top">
BoostUp
</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Référencement</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Posts</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<script src="./assets/js/jquery.js"></script>
<script src="/assets/js/booststrap/bootstrap.bundle.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="./assets/js/firestart.js"></script>
</body>
</html>
Ps : i'm on bootstrap 5
You forgot to include the toggler button.
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Toggler
Related
Base code:
<?php
session_start();
if ((!isset($_SESSION['valid']) == true)) {
unset($_SESSION['valid']);
header('location:index.php');
}
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Noticias sobre Vacina - Digital</title>
<!-- Bootstrap-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css" integrity="sha512-F7WyTLiiiPqvu2pGumDR15med0MDkUIo5VTVyyfECR5DZmCnDhti9q5VID02ItWjq6fvDfMaBaDl2J3WdL1uxA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="cover-container d-flex w-100 h-100 mx-auto flex-column">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Noticias sobre a vacina</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="home.php"><i class="fas fa-home"></i> Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="cadastro_noticia.php"><i class="fas fa-clipboard-list"></i> Cadastro de noticia </a>
</li>
<li class="nav-item dropdown">
</ul>
<form class="form-inline my-2 my-md-0">
<a class="nav-link active" href="index.php"><i class="fas fa-sign-out-alt"></i>Sair</a>
</form>
</div>
</div>
</nav>
<div id="wrapper" class="toggled" style="margin-left: 5%; display: inline;">
<div class="container-fluid" id="conteudo">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/js/bootstrap.bundle.min.js" integrity="sha512-PqRelaJGXVuQ81N6wjUrRQelCDR7z8RvKGiR9SbSxKHPIt15eJDmIVv9EJgwq0XvgylszsjzvQ0+VyI2WtIshQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- <script src="js/noticia.js"></script> -->
</body>
</html>
I've tried redirecting, using other CDNs and other factors, but nothing works, none makes the collapse work. I would like some help as I have no idea why it is not working.
Who can help me and also explain why, I would appreciate it.
You have to change the data-toggle to data-bs-toggle and use data-bs-target attribute. Add the ID in the collapse div. That's all.
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapse">
I am trying to implement a Navbar toggler referring the Bootstrap v5.1 documentation. I want to display the brand name on the left and the toggler on the right. Though this code is displaying the same but when I click the toggler the drop down menu is not showing and I am unable to figure out where the problem lies. How can I fix this?
Here's the code:
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
</body>
Here's the image of the working of the code
Your code is perfect. But you forget to connect JavaScript in your code.That's why the Navbar toggler isn't working perfectly.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
I wonder why the nav-items keeps showing every time I refresh the page in mobile view. I checked the aria-expanded: false but still it does not work.
This is my code:
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Portfolio</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg fixed-top navbar-light">
<div class="container-fluid justify-content-between mx-5 px-4">
<a class="navbar-brand" href="#">HELLO</a>
<button
class="navbar-toggler collapse collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarCollapse"
aria-controls="navbarTogglerDemo02"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ms-auto">
<li class="navbar-item">
<a class="nav-link active " aria-current="page" href="#">ABOUT</a>
</li>
<li class="navbar-item">
<a class="nav-link active" aria-current="page"href="#">PROJECT</a>
</li class="navbar-item">
<li class="navbar-item">
<a class="nav-link active" aria-current="page" href="#">RESUME</a>
</li>
<li class="navbar-item">
<a class="nav-link active" aria-current="page" href="#">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- <img class="img-fluid" src="img\heading-image.jpg" alt=""> -->
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
Please note: I'm still a beginner in bootstrap, html and css.
Remove the class collapse collapsed from button and add collapseto a menu div
here is the full code
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Portfolio</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg fixed-top navbar-light"
<a class="navbar-brand" href="#">HELLO</a>
<button
class="navbar-toggler "
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarCollapse"
aria-controls="navbarCollapse"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse " id="navbarCollapse">
<ul class="navbar-nav ms-auto">
<li class="navbar-item">
<a class="nav-link active " aria-current="page" href="#">ABOUT</a>
</li>
<li class="navbar-item">
<a class="nav-link active" aria-current="page"href="#">PROJECT</a>
<li class="navbar-item">
<li class="navbar-item">
<a class="nav-link active" aria-current="page" href="#">RESUME</a>
</li>
<li class="navbar-item">
<a class="nav-link active" aria-current="page" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
<!-- <img class="img-fluid" src="img\heading-image.jpg" alt=""> -->
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
Linked HTML file with bootstrap-v5, copied exact code from documentation.
Toggle button on the right not revealing "nav-item".
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!--class of bootsrap -->
<a class="navbar-brand" style="padding-left: 10px;">Code Decipher</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Content</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
Have you link bootstrap JS file ?
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
I am trying to do the basic bootstrap navbar hamburger button on a collapsed screen. I am first just trying to get the button to be displayed but currently it won't display to the screen.
<nav class="navbar bg-light navbar-expand-sm">
<h1 class="narbar-brand">User</h1>
<button class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Projects
</li>
</ul>
</div>
</nav>
There is nothing wrong with your html.
However, did you add js file (from bootstrap) to your html?
check this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">User</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
</ul>
</div>
</nav>
</body>
</html>