Boostrap Dropdown Active with External Header - javascript

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

Related

Bootstrap dropdown menu is not working[HTML]

i download bootstrap and added the scripts in my code, but don't know why. Everythig works fine, no error in console ,but a drop-down menu is not working ... what is the problem?
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="text/javascript" href="./assets/js/bootstrap.min.js">
<link rel="stylesheet" href="./assets/css/bootstrap.min.css">
<link rel="stylesheet" href="./assets/css/style.css">
<meta charset="utf-8">
</head>
<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="#" 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>
It seems you almost got it right!
you have data-toggle it needs to be data-bs-toggle
that should fix it!
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<meta charset="utf-8">
</head>
<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="#" id="navbarDropdownMenuLink" data-bs-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>

Bootstrap Navbar dropdown not working on mobile

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 -->

Unable to display images in Bootstrap 5 navbar using Node.js, Express, and EJS

I'm trying to build a site using express/node.js/ejs
I'm having a hard time with building a navbar using Bootstrap 5.0
In the app.js I have included express.static:
app.use(express.static('public'));
My navbar partial looks like this:
<nav class="navbar navbar-expand-sm sticky-top navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 mx-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
x
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">1</a></li>
<li><a class="dropdown-item" href="#">2</a></li>
<li><a class="dropdown-item" href="#">3</a></li>
</ul>
</li>
<li>
<a class="navbar-brand" href="#">
<img src="/public/images/logoKP.png" alt="" width="30" height="24">
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">5</a>
</li>
</ul>
</div>
</div>
My file structure:
public
images
logoKP.png
views
partials
navbar.ejs
app.js
Under chrome I receive 404 for the img. CSS connected the same way works just fine.
Please help. I'm still learning.
You don't need to include /public in your path. If everything else is correct this should work :
<img src="/images/logoKP.png" alt="" width="30" height="24">

Trying document.getElementById and add.EventListener to shutdown a RPi

it is my first question in stackoverflow and my first code in HTML/JS. I'm using NodeJS, bootstrap, express and ejs.
I'm trying to shutdown a Raspberry PI from the navigation bar. The code is:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Foot.io</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="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Rules">Rules</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/System">System</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">
<i class="fas fa-power-off"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" id="Reboot" href="#">Reboot</a>
<a class="dropdown-item" id="Shutdown" href="#">Shutdown</a>
</div>
</li>
</ul>
</div>
</div>
And the script tag is:
<script>
document.getElementById("Reboot").addEventListener("click", function(){console.log("rebooting...");});
document.getElementById("Shutdown").addEventListener("click", function(){console.log("shuting down...");});</script>
All of this code is included in a partial called "navigation.ejs"
I also try making a blank HTML with a simple button and it doesn't works.

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