Bootstrap 5.3.0 Dropdown menu not working

Bootstrap 5.3.0 Dropdown menu not working - javascript

My dropdown is working as in desktop and in movile version and ipad plus it toggle and collapse.
The issues is when i press it it only show the button but it doenst shwo the dropdown list after it is ipad version even i added javascrip jquery and css.
This is my code:
<script type="text/javascript">
$(document).ready(function() {
$('dropdown-toggle').dropdown()
});
</script>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">APIzoid</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data- target="#navbarToggleButton" aria-controls="navbarToggleButton" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerButton">
<ul class="navbar-nav ms-auto me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Fitness</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="jquery/jquery.js"></script>
<script type="text/javascript" src="./javascript/script.js"></script>

Related

how to collapse navbar onclick (bootstrap5)

I am asking for a way to collapse this nav-bar after link click rather than javascript event listener or data-bs-toggle and data-bs-target both methods answered in that article (article link) are not working with my code.
here is my code:
<header class="header-nav" id="home">
<nav class="navbar navbar-expand-lg custom-nav fixed-top">
<div class="container-fluid">
<a id="brand" href="#"><span>C</span> Solutions</a>
<button
class="navbtn"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span><i class="fas fa-bars burger-menu"></i></span>
</button>
<div
class="collapse navbar-collapse justify-content-between"
id="navbarSupportedContent"
>
<ul class="navbar-nav m-auto mb-2 mb-lg-0 text-center">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#home"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">why choose us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">careers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#our-clients">our clients</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact us</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<button class="btn btn-primary">request a quote</button>
</ul>
</div>
</div>
</nav>
</header>
can any one help please?

Your code works, you only forgot to add the boostrap.bundle.min.js in your index.html.
Add this in your index.html. that's all!
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
And you don't need to add extra js code. Only add this in your index.html and it should work.

How can I create a reusable navbar across multiple HTML pages with Bootstrap 5?

I would prefer a strictly JavaScript way of doing this if possible. Not really wanting to introduce a JavaScript framework into my project.
Layout:
./index.html
./about.html
./crew.html
./flights.html
./events.html
I want every page to have the same navbar such that I don't have to repeat myself and fix every page every time the order of the links change.
Here's my example navbar:
<nav class="navbar navbar-expand-xl navbar-light">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#toggleMobileMenu" aria-controls="toggleMobileMenu" aria-expanded="true" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse show" id="toggleMobileMenu">
<ul class="navbar-nav mx-auto">
<li class="nav-item text-center">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="crew.html">Crew</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="flights.html">Flights</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="events.html">Events</a>
</li>
</ul>
</div>
</nav>

Depending on what kind of browser support you need you could use a template literal (back ticks) to define your navigation. Then use insertAdjacentHTML to place it where you need it on all your html pages. If your page is fairly simple you could just insert the nav after begin on the body tag.
const navigation = `
<nav class="navbar navbar-expand-xl navbar-light">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#toggleMobileMenu"
aria-controls="toggleMobileMenu"
aria-expanded="true"
aria-label="Toggle Navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse show" id="toggleMobileMenu">
<ul class="navbar-nav mx-auto">
<li class="nav-item text-center">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="crew.html">Crew</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="flights.html">Flights</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="events.html">Events</a>
</li>
</ul>
</div>
</nav>
`
document.getElementById("nav-container").insertAdjacentHTML('afterbegin', navigation);
<div id="nav-container"></div>

Collapse the Bootstrap burger menu when you click on a scrollspy link

How can you collapse the menu of a Bootstrap burger when you click on a scrollspy link?
When viewing my website on a smartphone, the bootstrap nav is reduced to a burger menu. If you click on a link that leads to a specific place in my index.html (such as #aboutMe) and not to an external page, then the navigation remains unfolded. I want it to collapse again afterwards.
You can view the code on: https://github.com/senkvalentin/personal_page or visit the website on: https://senkvalentin.com/
Here is a part of my html:
.h-100vh{
height:100vh;
}
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="container">
<div class="row">
<nav class="navbar fixed-top navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="/"><img src="./img/logo.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#aboutMe">About</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#projectsList">Projects</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Admin
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="!#" target="_blank">Server - Info</a></li>
<li><a class="dropdown-item" href="#" target="_blank">Mail - Server</a></li>
<li><a class="dropdown-item" href="#" target="_blank">Mail - Server</a></li>
<li><a class="dropdown-item" href="!#" target="_blank">Cloud - Server</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div id="home" class="h-100vh bg-warning">Home</div>
<div id="aboutMe" class="h-100vh bg-success">About Me</div>
<div id="projectsList" class="h-100vh bg-primary">Project</div>
I already looked at: How to hide collapsible Bootstrap navbar on click
And: Bootstrap panel-collapse collapses when you click on a link inside it is clicked
but nothing worked.
I'm using the latest version of jQuery and Bootstrap version 5.0.1:
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

In Jquery simply trigger click on the navbar-toggler button when link is clicked
$('.nav-link').click(function(){
$('.navbar-toggler').click();
});
$('.nav-link').click(function(){
$('.navbar-toggler').click();
});
.h-100vh{
height:100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="container">
<div class="row">
<nav class="navbar fixed-top navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="/"><img src="./img/logo.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#aboutMe">About</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#projectsList">Projects</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Admin
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="!#" target="_blank">Server - Info</a></li>
<li><a class="dropdown-item" href="#" target="_blank">Mail - Server</a></li>
<li><a class="dropdown-item" href="#" target="_blank">Mail - Server</a></li>
<li><a class="dropdown-item" href="!#" target="_blank">Cloud - Server</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div id="home" class="h-100vh bg-warning">Home</div>
<div id="aboutMe" class="h-100vh bg-success">About Me</div>
<div id="projectsList" class="h-100vh bg-primary">Project</div>

You first need to select all .nav-link excluding .dropdown-toggle.
Then, assign an event listener to toggle the .navbar-collapse on click:
$(document).ready(() => {
let $navlinks = $('.nav-link').not('.dropdown-toggle');
// console.log($navlinks)
$navlinks.click((e) => {
$(e.target).closest('.navbar').find('.navbar-collapse').collapse('toggle')
})
})
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.css">
<div data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="container">
<div class="row">
<nav class="navbar fixed-top navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="/"><img src="./img/logo.png" alt="logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#aboutMe">About</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#projectsList">Projects</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Admin
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="!#" target="_blank">Server - Info</a></li>
<li><a class="dropdown-item" href="#" target="_blank">Mail - Server</a></li>
<li><a class="dropdown-item" href="#" target="_blank">Mail - Server</a></li>
<li><a class="dropdown-item" href="!#" target="_blank">Cloud - Server</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

Why won't scrollspy work in Bootstrap 4 if i use ./ in the href?

If I remove ./ from the href attribute then it works fine. Why?
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top navbar-toggleable-md" id="navbar1">
<div class="container-fluid">
<a class="navbar-brand" href="#top">
<img src="./img/logo.png" alt="" class="img-fluid logo">
</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 ml-auto">
<li class="nav-item ">
<a class="nav-link" href="./#features">Features <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="./#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./#video-play">Showreel</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./#gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./#team">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href=./ "#news">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./#contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item apply-now text-white">
<a class="nav-link text-white" href="./form-fee-easy.html">Apply Now</a>
</li>
</ul>
</div>
</div>
$('body').scrollspy({
target: '#navbar1'
});

I want my bootstrap 4 navbar to expand on hover

This is my navbar code and i am using bootstrap 4. Any solution with either javascript or jquery will be useful. I want my navbar to expant on hovering hamburger icon.
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Agency</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Careers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact US</a>
</li>
</ul>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>

$(document).ready(function() {
$('.navbar-toggler').mouseover(function() {
if($('.collapse').css('display') == 'none')
$('.collapse').show();
else
$('.collapse').hide();
})
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/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.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Agency</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Careers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact US</a>
</li>
</ul>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>

Thats how i will do it
$('.navbar-toggler').on('mouseenter', function(){
$('.collapse').addClass('show');
});
$('.pos-f-t').on('mouseleave', function(){
$('.collapse').removeClass('show');
});
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Agency</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Careers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact US</a>
</li>
</ul>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>

I think it's better using ids to show and hide the nav:
$('.navbar-toggler').mouseenter(function()
{
$('#navbarToggleExternalContent').css("display")!="block"?
$('#navbarToggleExternalContent').show():
$('#navbarToggleExternalContent').hide()
});

We Keep Coding

JavaScript is the programming language of the Web.

Bootstrap 5.3.0 Dropdown menu not working - javascript

Related

how to collapse navbar onclick (bootstrap5)

How can I create a reusable navbar across multiple HTML pages with Bootstrap 5?

Collapse the Bootstrap burger menu when you click on a scrollspy link

Why won't scrollspy work in Bootstrap 4 if i use ./ in the href?

I want my bootstrap 4 navbar to expand on hover

Categories

Resources