My bootstrap navbar toggler is not working - html

Please check the code to help me finding error. When I click on the toggle button it doesn't work i.e. doesn't show menu bar.
<body>
<!--navigation bar-->
<nav class="navbar navbar-expand-sm navbar-dark bg-danger pl-5 fixed-top">
<div class="container">
<a class="navbar-brand " href="index.php">E-SERVICE</a>
<span class="navbar-text">our service your happiness</span>
<button type="button" class="navbar-toggler" data-toggle="collapse" date-target="#myMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="myMenu">
<ul class="nav-list navbar-nav pl-5">
<li class="nav-item"><a class="nav-link" href="index.php">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#Services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#Registration">Registration</a></li>
<li class="nav-item"><a class="nav-link" href="#Login">Login</a></li>
<li class="nav-item"><a class="nav-link" href="#Contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!--javascript-->
<script src="js/jquery.min.js"></script>
<script src="js/pooper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/all.min.js"></script>
</body>


You just have a typo error and it shall work after you change the following.
Change
date-target="#myMenu"
to
data-target="#myMenu"
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<body>
<!--navigation bar-->
<nav class="navbar navbar-expand-sm navbar-dark bg-danger pl-5 fixed-top">
<div class="container">
<a class="navbar-brand " href="index.php">E-SERVICE</a>
<span class="navbar-text">our service your happiness</span>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="myMenu">
<ul class="nav-list navbar-nav pl-5">
<li class="nav-item"><a class="nav-link" href="index.php">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#Services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#Registration">Registration</a></li>
<li class="nav-item"><a class="nav-link" href="#Login">Login</a></li>
<li class="nav-item"><a class="nav-link" href="#Contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>

Related

Bootstrap mobile navbar won't collapse once opened

I'm working with a Bootstrap Navbar, and it looks generally okay, however on mobile it opens, but will not collapse once opened. I checked to make sure all the classes were right and made sure everything is where it should be. Is there something I'm missing?
Here is the code for the navbar. It's inserted onto the page as an E.js partial.
Any help would be appreciated. Thanks!
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<nav class="navbar navbar-light navbar-expand-md sticky-top navbar-shrink py-3" id="mainNav">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="/"><img src="https://via.placeholder.com/220x102" width="220" height="102"></a>
<button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1">
<span class="visually-hidden">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="navbar-nav mx-auto">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/about">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="/testimonials">Testimonials</a></li>
<li class="nav-item"><a class="nav-link" href="/store">Shop</a></li>
<li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
</ul>
<a class="btn btn-primary shadow" role="button" href="/checkout/cart">Cart</a>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

Why my bootstrap collapse navbar won't work

So im trying to create some navbar using bootstrap and make it able to collapse but it won't work
please help
This are my line of codes:
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="img/logo.png" alt="WebLogo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse.show">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Location</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Connect</a>
</li>
<li class="nav-item">
<button type="button" class="btn btn-outline-secondary">Sign in</button>
</li>
</ul>
</div>
</div>
</nav>
Appreciate it for the help, thankyou

You must add jQuery and popper.js link or file to your project
jQuery
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
visit bootstrap document

Bootstrap navbar not working in mob view the dropdown menu is not showing when I am clicking the button

<nav class="navbar navbar-expand-lg mt-md-4 navbar-dark">
<div class="container px-0">
<a class="navbar-brand" href="#">
<img src="./img/icon-assets/purple-tutor-logo.png" alt="" />
</a>
<button
class="navbar-toggler custom-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">
<div class="mr-auto"></div>
<ul class="navbar-nav">
<li class="nav-item" data-interval="3000">
<a class="nav-link" href="#">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How it Works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FAQs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">School Registration</a>
</li>
<li class="nav-item">
<a
class="nav-link btn btn-lg btn-nav"
href="https://study.purpletutor.com/register"
>Get a FREE TRIAL!</a
>
</li>
</ul>
</div>
</div>
</nav>
this is my navbar can someone please tell me what the error is why in mob view the collapse menu is not showing when I click the button
this is the script I am using and I am using bootstrap 4 cdn can someone please help me out I already checked multiple posts on stack overflow already
<script
src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"
></script>

There are no errors on your code, you are only missing jquery included for the dropdown to work on mobile, please add it before the bootstrap script like this:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"
></script>

navbar full-width of screen bootstrap 4.5

I'm trying to create a basic navbar but it's not fitting the full width of my page nor is it responding to any color classes, her's the code for my header
<body>
<div class="container-fluid">
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="newPage.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
Any idea of what i am doing wrong?

This may help. You must not have written any 'script'
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<!-- Brand/logo -->
<a class="navbar-brand" href="#">
<img src="bird.jpg" alt="logo" style="width:40px;">
</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</nav>
</body>

My navigation button is not working in mobile

My navigation button is not working in mobile, please help me. below is code...Thank you in advance.
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container">
Brajee
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navNavbar"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
Home
</li>
<li class="nav-item">
About Us
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Blog
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</div>
</nav>

The reason your hamburger button is not working is because you aren't loading the corresponding JavaScript files and/or jQuery. I'm posting your snippet below with those files and it's working. You can test it by clicking "run code snippet" below.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container">
Brajee
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navNavbar"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
Home
</li>
<li class="nav-item">
About Us
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Blog
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</div>
</nav>
<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>