Dropdown menu not opening on click - javascript

The dropdown menu inside navbar is not opening on click.
Here's HTML part:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="icon" href="brand logo.png" type="image/gif">
<title>Special Education Notes</title>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="#homeImage"><img src="brand logo.png" alt="logo" style="width: 70px;"></a>
<button class="navbar-toggler" type="button" id="menu-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 mr-auto">
<li class="nav-item active">
<a class="nav-link" style="font-size: 20px;" href="#about">About Us<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" style="font-size: 20px;" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Notes
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" style="font-size: 20px;" href="bedspl.php">B.Ed Special Education</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" style="font-size: 20px;" href="dedspl.php">D.Ed. Special Education</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" style="font-size: 20px;" href="#contact-us" aria-disabled="true">Contact Us</a>
</li>
<li class="nav-item active">
<a class="nav-link" style="font-size: 20px;" href="#" aria-disabled="true">Upload</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><span class="nav-link"><i class="fab fa-facebook-square"></i></span></li>
</ul>
</div>
</nav>
</body>
</html>
And here's the javascript code:
$('.navbar-collapse a').click(function() {
});
$('.navbar-collapse a').click(function() {
});
JSFiddle link: https://jsfiddle.net/n2jq7uLx/
I want my navbar to close after selecting the link but it seems to not working on the dropdown menu inside the navbar.
Thanks in advance.

The dropdown menu guard is realized as a html anchor element (a). IN the intializer code, the same handler is attached as is for the leaf anchors that implement actual navigation.
Solution:
Do not attach the handler to this element.
Coding:
The linked fiddle has several problems:
It does not include jQuery, while jQuery is used
The handlers use the .collapse method that is not defined.
The use of .hide (which was probably intended) does not work here because the .navbar-collapse element whose css is to be modified has the display property value marked with !important in its css overriding the settings produced by the click handler.
(The click handler might be set at the wrong point in time as it is not explicitly sync'ed with the dom tree creation ( I haven't checked this though and haven't researched this any more but wrapped the handler assignments with the jquery .ready method ))
The code below uses the more specific css selector that controls the display: flex!important css property assignment to the navigation bar and filters the dropdown menu guard from the elements the handler is registered with. The element to be hidden is found in a bottom-up traversal starting at the element receiving the element which might be a tad more efficient than querying it by its css class (no benchmarks though).
$(document).ready(() => {
$('.navbar-expand-sm .navbar-collapse a').not(".dropdown-toggle").click(function(eve) {
$(eve.target).closest(".navbar-expand-sm .navbar-collapse").css('visibility', 'hidden');
});
});
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="icon" href="brand logo.png" type="image/gif">
<title>Special Education Notes</title>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="#homeImage"><img src="brand logo.png" alt="logo" style="width: 70px;"></a>
<button class="navbar-toggler" type="button" id="menu-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 mr-auto">
<li class="nav-item active">
<a class="nav-link" style="font-size: 20px;" href="#about">About Us<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" style="font-size: 20px;" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Notes
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" style="font-size: 20px;" href="http://www.google.de">B.Ed Special Education</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" style="font-size: 20px;" href="http://www.google.de">D.Ed. Special Education</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" style="font-size: 20px;" href="#contact-us" aria-disabled="true">Contact Us</a>
</li>
<li class="nav-item active">
<a class="nav-link" style="font-size: 20px;" href="#" aria-disabled="true">Upload</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><span class="nav-link"><i class="fab fa-facebook-square"></i></span></li>
</ul>
</div>
</nav>
</body>
</html>

Finally got the correct code:
$('.navbar-collapse a:not(.dropdown-toggle)').click(function(){
$(".navbar-collapse").collapse('hide');
});

Related

GitHub pages not responding to bootstrap; instead on local it simply works

I would like to publish a website. The problem is that it works perfectly on local but when I create a GitHub repository and try to see the page the bootstrap interactivity doesn't work (navbar dropdown). The funny thing is that my javascript actually works! I can share some screenshots... What am I missing? Thank you in advance. [P.S: I used git to push the project on github]
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width", initial-scale="1", shrink-to-fit="no">
<meta http-equiv="x-ua-compatible" content="ie-edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="icon" type="image/png" href="assets/img/bulldozer-icon.png">
<script src="js/javascript.js"></script>
<link rel="stylesheet" href="css/styles.css">
<title>New Portfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light col-12 col-md-12" id="navbar">
<div class="container">
<button class="navbar-toggler ml-auto" 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 ml-auto mr-auto">
<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="#files">Files</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">Contacts</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="https://github.com/Zipep" target="_blank"><i class="fa-brands fa-github"></i> Github</a>
<a class="dropdown-item" href="https://www.linkedin.com/in/giuseppe-andrea-savino-0266a31b4/?locale=en_US" target="_blank"><i class="fa-brands fa-linkedin"></i> Linkedin</a>
<a class="dropdown-item" href="mailto:giuseppeasav#outlook.it"><i class="fa-solid fa-envelope-open"></i> Email</a>
<a class="dropdown-item" href="https://twitter.com/" target="_blank"><i class="fa-brands fa-twitter"></i> Twitter</a>
</div>
</li>
<li class="nav-item">
<label class="switch">
<input type="checkbox" checked aria-label="true">
<span class="slider round" id="button" onclick="myFunction()"></span>
</label>
<i class="fa-solid fa-wand-magic-sparkles"></i><span id="nox-lumos"> Nox!</span>
</li>
</ul>
</div>
</div>
</nav>
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/popper.js/dist/popper.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>

bootstrap 5 how to close the whole menu when click on the link or click outside on the page

I'm using BootStrap 5 to build my page
I have a NavBar Menu with links
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<nav class="navbar navbar-expand-lg navbar-light bg-transparent pt-0 pb-0">
<div class="container">
<a class="navbar-brand pt-0 pb-0 me-0" href="#home">Salimi<span>Me</span></a>
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item position-relative">
<a class="nav-link active" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item position-relative">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item position-relative">
<a class="nav-link" href="#skills">Skills</a>
</li>
<li class="nav-item position-relative">
<a class="nav-link" href="#timeline">Education</a>
</li>
<li class="nav-item position-relative">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item position-relative">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
<a class="top-btn text-decoration-none d-inline-block" href="#">Download CV</a>
</div>
</div>
</nav>
what i try to do is when the user click on the link i want the whole meu to close and the user get the section he want
also if he click outside the menu the menu close if it's open
How to close the whole NavBar Menu when i click on a link inside or i click outside on the page?
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<style></style>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</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 dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider" /></li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
</html>

Bootstrap 4 navbar nav-item active class not working

I am quite desperate, I checked every similar questions on stackoverflow and tried many solutions found on google but in vain... I'm really unable to find a working solution to my problem.
I am developping a site with Bootstrap 4 and I have a navbar. When I click on one of the nav-link I want it to have the "active" class, while others stay normal.
I might not select the right elements or use wrong jquery/javascript code.
The navbar html code (1) is in a separate header.html file that I load with JS at the beginning of the html page (2):
(1)
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top ml-auto">
<div class="container">
<a class="navbar-brand" href="../index.html#"><img src="../images/DSIMB.svg" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Team</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="members.html#">Members</a>
<a class="dropdown-item" href="publications.html#">Publications</a>
<a class="dropdown-item" href="teaching.html#">Teaching</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="web_tools.html#">Web Tools</a>
</li>
<li class="nav-item">
<a class="nav-link" href="research.html#">Research</a>
</li>
<li class="nav-item">
<a class="nav-link" href="infrastructures.html#">Infrastructures</a>
</li>
<li class="nav-item">
<a class="nav-link" href="news.html#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contacts.html#">Contacts</a>
</li>
</ul>
</div>
</div>
</nav>
(2)
<script>
$(function() {
$("#header").load("./header.html");
});
</script>
Here is the JS I put at the end of the html page just before the </body> tag:
<script>
$('.navbar .nav-item .navlink').click(function() {
$('.navbar .nav-item').removeClass('active');
$(this).addClass('active');
})
</script>
And here the active css class I want to set to the active nav-link:
.navbar .nav-item > .nav-link.active {
color:white;
font-weight: 700;
}
Please tell me what I am doing wrong...
UPDATE
I put here the solution I found thanks to a simple snippet (that I adapted to my code) taken from this site which #NmiDev kindly pointed to me.
I add my custom active class to the link in the navbar targeted thanks to href / location parsing:
$("#header").load("./header.html", function(){
$('a[href="' + location.pathname.split("/")[2] + '"]').addClass("active-nav");
});
Here a snippet.
Hope it's help you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.active {
color: red !important;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top ml-auto">
<div class="container">
<a class="navbar-brand" href="../index.html#"><img src="../images/DSIMB.svg" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Team</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Members</a>
<a class="dropdown-item" href="#">Publications</a>
<a class="dropdown-item" href="#">Teaching</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Web Tools</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Research</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Infrastructures</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contacts</a>
</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>
<script>
$('.nav-link').click(function() {
$('.nav-link').removeClass('active');
$(this).addClass('active');
})
</script>
</body>
</html>
It's seems that you don't need to override the css active class. White is the default behavior.

Why won't bootstrap navbar menu show?

I'm very new to Bootstrap (and front end dev in general). I'm trying to get a Bootstrap4 navbar to work. I've essentially copied and pasted code from the bootstrap website, but I can't get it working.
When I shrink the page, the menu does collapse as it should. However, when I click on the collapsed menu, nothing happens. Also, on the expanded menu, nothing happens when I click the dropdown menu.
I've verified path to the boostrap.min.js is correct.
I'm loading this page file via "file://" in my browser, not off a server. I don't know if that could be a problem, but I wouldn't think so. Anyway, here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css" />
<script href="static/js/jquery-3.3.1.min.js"></script>
<script href="static/js/popper.min.js"></script>
<script href="static/js/bootstrap.min.js"></script>
</head>
<body>
<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="#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 mr-auto">
<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="#">Link</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">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
I'm sure it's something simple (I feel like the javascript isn't loading, for some reason), but I can't figure it out. Anybody see anything obvious?
Edit: I should also note that I don't see any Javascript errors in console, and I'm not sure I'm checking correctly, but it doesn't look like there are event listeners registered for the button (so nothing should happen when I click it).
Edit2: I just started a quick web server to load this from. None of the javascript files are being requested from the server. The main problem seems to be with the loading of the javascript files. Paths are correct, though.
Solved: The problem was I was using href for my script tags, instead of src. Changed to src and everything is working as expected.
Try the following code below for BootStrap4 Starter template. It will run anywhere just double click on the file. All source included from CDN.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<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>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<main role="main" class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</main><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<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://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>
</body>
</html>
The attributes for the script tags were all wrong. I had href. It should be src. I fixed it and everything is working now.

Bootstrap navbarDropdown doesn't work

I've got problem with navbar dropdown. It show up properly but when I try to expand category doesn't happen anything. Also copied templary straight from Bootstrap's documentation. Doesn't seem like I can figure it out what is wrong by myself.
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>Bootstrap beginning</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/src/css/bootstrap.css">
<link rel="stylesheet" href="/src/css/styles.css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Company</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>
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>
And here is my directory: Directory
As you can see in your console, the requiered js could not be loaded.
So check your paths for the files that you can see in the console with an error of 404. Your .css files are getting loaded from /src/css/ but your js files from /js/ it should be src/js. You may want to check that... . I´m affraid no one can help you find your files on your webserver!

Categories