Bootstrap Navbar dropdown not working on mobile - javascript

This is a part of code from my nav bar. I am trying to create a dropdown menu, but unfortunately on mobile when i click the toggle instead of showing dropdown it closed . I have tried to update all the stylesheet bootstrap code , and link . i have tried other models on navbar dropdown but the same thing
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="index.html">
<img src="assets/images/mindnmovelogo.png" alt="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="toggler-icon"></span>
<span class="toggler-icon"></span>
<span class="toggler-icon"></span>
</button>
<div class="collapse navbar-collapse sub-menu-bar" id="navbarSupportedContent">
<ul id="nav" class="navbar-nav ml-auto">
<li class="nav-item">
<a class="page-scroll" href="#home">INDUSTRIES</a>
</li>
<li class="nav-item">
<a class="page-scroll" href="#about">WHO WE ARE</a>
</li>
<li class="nav-item dropdown">
<a class="page-scroll nav-link " href="#" id="navbarDropdown" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><i class="fa fa-newspaper-o"></i>WHAT WE DO</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</li>
<li class="nav-item">
<a class="page-scroll" href="#footer">GET IN TOUCH</a>
</li>
</ul>
</div> <!-- navbar collapse -->
<div class="navbar-btn d-none d-sm-inline-block">
<a class="main-btn" data-scroll-nav="0" href="mailto:">GET A FREE QUOTE</a>
</div>
</nav> <!-- navbar -->

Related

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>

Bootstrap 4 - change active status of nav-items

I'm lost with my navbar - I can't figure out how to change an active parameter of nav-items in a single main.js.
My navbar:
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-info justify-content-lg-center justify-content-md-end">
<a class="navbar-brand" href="#">
<img src="{{ url_for('static', filename='icons/menu_icon.svg') }}" class="img-fluid"
style="width: 2.0rem; height: auto;" alt="MyWebName">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item" id="link_index">
<a class="nav-link" href="{{ url_for('index') }}">Homepage<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown" id="link_someDropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdownOfSomething">
<a class="dropdown-item" href="{{ url_for('page1') }}">Page 1</a>
<a class="dropdown-item" href="{{ url_for('page2') }}">Page 2</a>
</div>
</li>
<li class="nav-item" id="link_page3">
<a class="nav-link" href="{{ url_for('page3') }}">Page 3</a>
</li>
</ul>
<ul class="navbar-nav mr-auto justify-content-lg-end">
<li class="nav-item" id="link_email">
<a class="nav-link" href="https://gmail.com" target="_blank">E-mail</a>
</li>
</ul>
</div>
Can anyone help me please?

Onscroll navbar not working properly. In mobile device when clicked on hamburger menu it will goes upward

<nav id="mynav" class="navbar navbar-expand-lg navbar-light sticky-top">
<div id="mainnav" class="container-fluid" >
<a class="navbar-brand pt-0 pb-0" href="index.html">
<img src="./assets/pranav logo1 (1).png" class="img-fluid d-inline-block align-top logo" alt="" loading="lazy">
</a>
<button class="navbar-toggler mr-5" id="mynavbtn" 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 class="collapse navbar-collapse mob" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link js-scroll-trigger" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="about.html">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="services.html" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item js-scroll-trigger" href="services.html">Web Designing</a>
<a class="dropdown-item js-scroll-trigger" href="services.html">Software Development</a>
<a class="dropdown-item js-scroll-trigger" href="services.html">Digital Marketing</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="contact-us.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
$(document).ready(function(){
var backScroll =window.pageYOffset;
window.onscroll = function (){
var currentScroll = window.pageYOffset;
if(backScroll >currentScroll) {
document.getElementById("mynav").style.top="0";
}else{
document.getElementById("mynav").style.top="-100px";
}
backScroll = currentScroll;
}
});
(Wrong Output)The navbar is hidden (top:-100px)
Expected Output
On desktop code works properly when downward scroll is detected navbar is hidden (top:100px) and when upward scroll is detected navbar will be display but In mobile device When I clicked on hamburger menu it collapse but also hiding logo and hamberger section.
I uploaded please you will get it.

Boostrap Dropdown Active with External Header

How can I add the boostrap "active" class to my navbar on an external header, my header code is this
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#"><img src="../assets/img/logo_white.png" style="height: 35px;"></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 class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="about/about-us.html">About Us</a>
<a class="dropdown-item" href="about/staff.html">Staff Team</a>
<a class="dropdown-item" href="about/partners.html">Partners</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Resources
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="resources/downloads.html">Downloads</a>
<a class="dropdown-item" href="resources/charts.html">Charts</a>
<a class="dropdown-item" href="resources/metar.html">METAR Decoder</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="academy/index.html">Academy</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Fly</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://forums.multicrew.co.uk/">Forums</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://multicrew.setmore.com/">Book</a>
</li>
</ul>
</div>
</nav>
For example if I navigate to the page about/about-us I would want the active class to be added to both the li dropdown menu "about" and then the actual dropdown "about-us" bearing in mind that I am using an external header the file being /header.html. How could I do it?
If I'm right in saying I would need to use jQuery or php, how would I implement this?
EDIT
I have tried to use the Vitaa ActiveNavigation jQuery plugin found here but to no luck
Thanks

Bootstrap dropdown in 4.0.0 BETA

I have a problem with the new version of bootstrap (4.0.0 BETA), I want to use navbar dropdown with the new version but it doesn't work. I try the example in the documentation but it doesn't work, any one have an idea?
This is my code :
<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="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
You need to add jquery and bootstrap JS to the page for it to work. See the snippet below.
Essentially the feature of expanding navbar is implemented in bootstrap with JS, and bootstrap requires JQuery in order for the feature to work. Thus importing CSS alone will not be sufficient for the navbar to work well.
You can read more about it here and here.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<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="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>

Categories