I can get the navbar to be visible, but the drop down menu in the navbar does not work -- when I click on the drop down menu it does not display the menu.
I got the source code from another Bootstrap website. But it is not working properly in my project.
HTML:
<nav class="mb-1 navbar navbar-expand-lg navbar-dark info-color" style="background-color: #293631; height: 2cm">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-4"
aria-controls="navbarSupportedContent-4" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-4">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="https://www.facebook.com/madhusanka.edirimanna">
<i class="fab fa-facebook-f"></i> Facebook
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fab fa-instagram"></i> Instagram</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-4" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user" ></i> Profile </a>
<div class="dropdown-menu dropdown-menu-right dropdown-info" aria-labelledby="navbarDropdownMenuLink-4">
<a class="dropdown-item" href="#">My account</a>
<a class="dropdown-item" routerLink="/home">Log out</a>
</div>
</li>
</ul>
</div>
</nav>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<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-lg navbar-light bg-light">
<button class="navbar-toggler ml-auto" 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="https://www.facebook.com/madhusanka.edirimanna">
<i class="fab fa-facebook-f"></i> Facebook
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fab fa-instagram"></i> Instagram</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-4" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user" ></i> Profile </a>
<div class="dropdown-menu dropdown-menu-right dropdown-info" aria-labelledby="navbarDropdownMenuLink-4">
<a class="dropdown-item" href="#">My account</a>
<a class="dropdown-item" routerLink="/home">Log out</a>
</div>
</li>
</ul>
</div>
</nav>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
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>
First check if you have used the links properly. A suggestion to you is using jQuery.min CDN not the slim version that is provided on Bootstrap. I have faced lots of problems for that. Also to keep the button right aligned I gave .ml-auto on the button. If you want it to be left aligned simply remove the class. Hope it'll help
Related
I've been using Bootstrap to make a navbar, and the dropdown button hasn't been doing anything when I click on it. What could be the issue?
<!-- Website HEAD -->
<head>
<title> Celeb Live </title>
<!-- Website Meta's -->
<meta charset="UTF-8">
<meta name="Description" content="Meet Celebrities virtually live around the world!">
<meta name="Keywords" content="celeblive, Celeb Live, Meet Celeb">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Website CSS / Bootstrap / FONT AWESOME / AOS -->
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" integrity="sha256-46r060N2LrChLLb5zowXQ72/iKKNiw/lAmygmHExk/o=" crossorigin="anonymous" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" href="src/css/main.css">
</head>
<!-- Website BODY -->
<body>
<!-- Website Navbar -->
<nav class="navbar navbar-expand-md navbar-fixed-top ">
<a class="navbar-brand"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i class="fas fa-bars" style="color:#fff; font-size:28px;"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Celebs
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown" id="navbarDropdown">
<li><a class="dropdown-item" href="#">Music celebrities</a></li>
<li><a class="dropdown-item" href="#">Youtube celebrities</a></li>
<li><a class="dropdown-item" href="#">Hollywood celebrities</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Events
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown" id="navbarDropdown">
<li><a class="dropdown-item" href="#">Music artist live events</a></li>
<li><a class="dropdown-item" href="#">Youtuber live events</a></li>
<li><a class="dropdown-item" href="#">Hollywood live events</a></li>
</ul>
</li>
<li class="nav-item active">
<a class="nav-link" href="home.html">
<img src="https://raw.githubusercontent.com/ConstantineLinardakis/TSA-Webmaster-Challenge/main/src/assets/CelebLive.png" alt="CelebLive" height="90" width="100">
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">About
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown" id="navbarDropdown">
<li><a class="dropdown-item" href="#">About the team</a></li>
<li><a class="dropdown-item" href="#">About the program</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link login" href="#">Login</a>
</li>
</ul>
</div>
</nav>
<!-- Website CONTAINER-FLUID (CONTENT) -->
<div class="container-fluid">
<div class="container">
</div>
</div>
<!-- Website FOOTER -->
<footer class="page-footer">
<!-- fixed bottom here if needed and AOS -->
<div class="text-center">
<div class="footer-copyright">
© 2021 Copyright:
CelebLive.com
</div>
</div>
</footer>
<!-- Website JS Bootstrap/Popper/AOS -->
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
My theory :
I don't know if it is the navbar data-target, but changing that seemed to not do anything?
My burger does appear, but it does not have a function to when it is clicked? Could it be a JS problem, or a bad stylesheet link/script link?
Problem / Resolution : Bootstrap 5.0. data-bs-toggle and data-bs-target in navbar-toggler.
Fix :
<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">
<i class="fas fa-bars" style="color:#fff; font-size:28px;"></i>
</span>
</button>
I have been using bootstrap in projects very smoothly, but then in one angular project, its navbar toggler icon button is appearing but not showing the nav items on clicking the button.
<div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Admin Header</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" routerLinkActive="active">
<a class="nav-link" routerLink="./home">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="./about">About</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="./services">Services</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="./contact">Contact</a>
</li>
<li class=" btn-primary nav-item text-white" role="button">
<a class="nav-link text-white" (click)="logOut()" >logout</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
This is the Navbar result:
On decreasing the width of the browser we have results something like this:
below is the code of index.html:
But on clicking on this button I am not able to see any nav items.
Works perfectly fine, you must be missing some script files.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Admin Header</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" routerLinkActive="active">
<a class="nav-link" routerLink="./home">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="./about">About</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="./services">Services</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="./contact">Contact</a>
</li>
<li class=" btn-primary nav-item text-white" role="button">
<a class="nav-link text-white" (click)="logOut()">logout</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- JavaScript -->
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
So using bootstrap 4 I've created a navbar that collapses into a button when the screen gets too small. When it isn't collapsed, the navbar is setup in the perfect order. However, when it does collapse behind a button, one item (the icon image) is centered while the rest of the items are to the left. How can I make the icon go to the left ONLY when the navbar has collapsed (like the rest of the items).
I've tried doing "float-md-left" on the icon image, however that made no changes.
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mx-auto">
<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 mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">The Party<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Current Stadium</a>
</li>
<a class="navbar-brand mx-auto float-sm-left" href="#"><i class="fas fa-football-ball"></i></a>
<li class="nav-item">
<a class="nav-link" href="#">RSVP</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">
Stadium History
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">2017 Stadium</a>
<a class="dropdown-item" href="#">2018 Stadium</a>
<a class="dropdown-item" href="#">2019 Stadium</a>
</div>
</li>
</ul>
</div>
</nav>
I got you point. this is happing due to mx-auto class.
Is there any specific reason for applying mx-auto class? Otherwise, you can remove itself.
Also, please remove float class.
Please have a look on below code.
<a class="navbar-brand mx-lg-auto" href="#"><i class="fas fa-football-ball"></i></a>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mx-auto">
<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 mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">The Party<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Current Stadium</a>
</li>
<a class="navbar-brand mx-lg-auto" href="#"><i class="fas fa-football-ball"></i></a>
<li class="nav-item">
<a class="nav-link" href="#">RSVP</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">
Stadium History
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">2017 Stadium</a>
<a class="dropdown-item" href="#">2018 Stadium</a>
<a class="dropdown-item" href="#">2019 Stadium</a>
</div>
</li>
</ul>
</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>
<nav class="navbar navbar-expand-lg navbar-expand-md sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">Website </a>
<button class="navbar-toggle collapsed " data-toggle="collapse" data-target="#navbarNavDropdown" aria-expanded="false">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html"> Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="link1.html"> Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="link2.html"> Link2</a>
</li>
</ul>
</div>
</div>
</nav>
The button which is supposed to show up only when window is resized to small size, is always showing on the right of the Website name. It is looking ugly in fullscreen, that is, while viewing in computer mode. I want to remove it from showing in high resolution devices. Tell me where am I making mistake.
Because the correct class name for the Bootstrap 4 Navbar is navbar-toggler, not navbar-toggle.
<nav class="navbar navbar-light navbar-expand-lg navbar-expand-md sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">Website </a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNavDropdown" aria-expanded="false">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html"> Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="link1.html"> Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="link2.html"> Link2</a>
</li>
</ul>
</div>
</div>
</nav>
https://www.codeply.com/go/9uKT2H0EgP
Only use class navbar-expand-sm if you want the icon to show up only on narrow viewports. Find an overview in the documentation. Also you use a wrong class for the hamburger icon: class="navbar-toggler", like
Zim already said.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="#">Expand at sm</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample03">
<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="https://example.com" id="dropdown03" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown03">
<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-md-0">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I'm working on a navigation bar where 2 items have drop-down menus. The first drop-down works fine but the second one always triggers the first one. I've tested it after removing any extra styles I've added but it still isn't working.
I'm sure it's something obvious but I just can't seem to figure it out.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="css/app.css" rel="stylesheet" />
<!-- NAVIGATION BAR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapsing" aria-controls="navbarCollapsing" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="navbar-brand mb-0">
<img class="pigs-logo" src="assets/logo.png">
</h1>
<div class="collapse navbar-collapse" id="navbarCollapsing">
<div class="nav navbar-nav">
<a class="nav-item nav-link active" href="./index.html">
Home
</a>
<a class="nav-item nav-link" href="./tour.html">
Tour
</a>
<a class="nav-item nav-link dropdown-toggle" href="#" id="navbar-media" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Media
</a>
<div class="dropdown">
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-media">
<a class="dropdown-item" href="./videos.html">
Videos
</a>
<a class="dropdown-item" href="./photos.html">
Photos
</a>
<a class="dropdown-item" href="./audio.html">
Audio
</a>
</div>
</div>
<a class="nav-item nav-link" href="./about.html">
About
</a>
<a class="nav-item nav-link dropdown-toggle" href="#" id="navbar-contact" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Contact
</a>
<div class="dropdown">
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-contact">
<a class="dropdown-item" href="./contact.html">
Contact
</a>
<a class="dropdown-item" href="./booking.html">
Booking
</a>
</div>
</div>
</div>
</div>
</div>
</nav>
In my case, the issue was I didn't wrap the entire dropdown (both the triggering element, and the menu items) inside a <div class="dropdown">. It still worked, until I added a second dropdown and found it was being triggered by the wrong element.
Bootstrap 4 dropdowns should have the following basic structure:
<div class="dropdown">
Triggering Element
<div class="dropdown-menu">
Item One
Item Two
Item Three
</div>
</div>
I was missing the outer <div>.
Please use <li class="nav-item"><li> in navbar not use direct a tag. Like below code.
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- NAVIGATION BAR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapsing" aria-controls="navbarCollapsing" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="navbar-brand mb-0">
<img class="pigs-logo" src="assets/logo.png">
</h1>
<div class="collapse navbar-collapse" id="navbarCollapsing">
<div class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="./index.html">
Home
</a>
<li>
<li class="nav-item">
<a class="nav-link" href="./tour.html">
Tour
</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="navbar-media" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Media
</a>
<div class="dropdown">
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-media">
<a class="dropdown-item" href="./videos.html">
Videos
</a>
<a class="dropdown-item" href="./photos.html">
Photos
</a>
<a class="dropdown-item" href="./audio.html">
Audio
</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="./about.html">
About
</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link dropdown-toggle" href="#" id="navbar-contact" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Contact
</a>
<div class="dropdown">
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-contact">
<a class="dropdown-item" href="./contact.html">
Contact
</a>
<a class="dropdown-item" href="./booking.html">
Booking
</a>
</div>
</div>
</li>
</div>
</div>
</div>
</nav>
The suggestion from the other answer regarding a tags for dropdowns in navbar is WRONG.
You certainly CAN use purely a tags the way you were using them without any problems.
Only when it comes to multiple drop-down items, when you have more than one drop-down, you need to wrap them in a div with the class btn-group like shown in the code snippet below. (strictly speaking, the first drop-down doesn't need to be wrapped this way, but I did it anyway for consistency)
Click "run code snippet" below and expand to full page for live testing:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapsing" aria-controls="navbarCollapsing" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="navbar-brand mb-0">
<img class="pigs-logo" src="https://placehold.it/30">
</h1>
<div class="collapse navbar-collapse" id="navbarCollapsing">
<div class="nav navbar-nav">
<a class="nav-item nav-link active" href="./index.html">
Home
</a>
<a class="nav-item nav-link" href="./tour.html">
Tour
</a>
<div class="btn-group">
<a class="nav-item nav-link dropdown-toggle" href="#" id="navbar-media" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Media
</a>
<div class="dropdown">
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-media">
<a class="dropdown-item" href="./videos.html">
Videos
</a>
<a class="dropdown-item" href="./photos.html">
Photos
</a>
<a class="dropdown-item" href="./audio.html">
Audio
</a>
</div>
</div>
</div>
<a class="nav-item nav-link" href="./about.html">
About
</a>
<div class="btn-group">
<a class="nav-item nav-link dropdown-toggle" href="#" id="navbar-contact" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Contact
</a>
<div class="dropdown">
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-contact">
<a class="dropdown-item" href="./contact.html">
Contact
</a>
<a class="dropdown-item" href="./booking.html">
Booking
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>