I just uploaded a test page When you click on them you don't get directed to the album page link. The page blinks and jumps quickly. Here is the live test page to see what I mean. Here is the live test page to see what I mean
<!DOCTYPE html><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"><title>TEST JohnandCricket.com ALBUM 1</title><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 type=text/css href=jquery.fancybox.min.css><link href="css/custom.css" rel="stylesheet"><meta name="author" content="John Samonas"><meta name="robots" content="index, follow"><meta name="description" content=""><!-- Open Graph general (Facebook, Pinterest & Google ) --><meta name="og:title" content="JohnandCricket.com"><meta name="og:description" content=""><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/manifest.json"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"><meta name="theme-color" content="#ffffff"></head><body><header><img class="banner img-fluid lazy mx-auto" src="images/jcb.jpg" alt="John and Cricket banner"></header>
<div class="container-fluid">
<nav class="navbar navbar-expand-md navbar-custom"><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="index.html">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">Photos</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="album1.html">Album 1</a></li>
<li><a class="dropdown-item" href="album2.html">Album 2</a></li>
<li><a class="dropdown-item" href="album3.html">Album 3</a></li>
<li><a class="dropdown-item" href="album4.html">Album 4</a></li>
</ul></li></ul></div></nav>
<div class="container">
<div class="embed-responsive embed-responsive-16by9 w-100">
<iframe style="min-height:100vh;" src="https://www.youtube.com/embed/S8smZWM_dl8" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="clearfix"></div>
</div>
</div><script defer src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script><script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script><script>var lazyLoadInstance = new LazyLoad({ elements_selector: ".lazy" });</script><script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script></body></html>
CSS:
body{color:#00008b;font-family:Georgia;font-size:22px}body,.masthead{background:url(../images/bg.jpg) no-repeat fixed center;background-size:cover}.masthead img{width:100%;height:180px;max-height:200px;height:auto}.container{background-color:snow;border-radius:2rem;margin:1.5rem auto;width:90%;}.navbar-custom{background-color:#32de84}.navbar-custom .navbar-brand,.navbar-custom .navbar-text{text-decoration:none;color:#000}a.navbar-brand:link,a.navbar-brand:visited{color:#32de84;text-decoration:none;background-color:#000;border-radius:50%;padding:.5rem}a.navbar-brand:hover,a.navbar-brand:focus{color:red;text-decoration:none}.navbar-custom .navbar-nav .nav-link{text-decoration:none;color:#000}.navbar-custom .nav-item.active .nav-link,.navbar-custom{text-decoration:none;color:#000}.nav-item .nav-link:hover{color:#000;background-color:#fff;border-radius:.5rem}.navbar-custom .dropdown-menu{background-color:#32de84}.navbar-custom .dropdown-item{text-decoration:none;color:#000}.navbar-custom .dropdown-item:hover,.navbar-custom .dropdown-item:focus{text-decoration:none;color:#000;background-color:#fff}@media (max-width:767px){nav.navbar{max-height:100vh;overflow:auto;-webkit-overflow-scrolling:touch}}.navbar-toggler{border-color:rgb(255,255,255)}.navbar-toggler-icon{color:#fff}.navbar-toggler-icon:hover{background:#fff}span.navbar-toggler-icon{background-image:url("data:image/svg xml;charset=utf8,")}@media (max-width:767px){nav.navbar{max-height:100vh;overflow:auto;-webkit-overflow-scrolling:touch}}#bgXXX{background:url(../images/bg.jpg);background-size:cover;background:no-repeat center center fixed}a{color:#00008b;text-decoration:none}a:hover,a:focus{color:#036;text-decoration:underline}a{color:#00008b;text-decoration:underline;a:hover{color:#036;text-decoration:underline}}h1,h2,h3,h4,h5,h6{color:#00008b}.img-fixed{padding-bottom:5px}.carousel-item .img-fluid{width:90%;height:auto}.carousel-item a{display:block;width:100%;height:auto}.carousel-control-prev{color:background-color:#3F0;margin-left:-1rem;z-index:10;text-decoration:none}.carousel-control-next{color:background-color:#3F0;;margin-right:-1rem;z-index:10;text-decoration:none}.carousel-controls a:hover{color:#00cc00;z-index:10;text-decoration:none}
.carousel-control-prev:hover{color:#458B00;text-decoration:none}
.carousel-control-next:hover{color:#458B00;text-decoration:none}.embed-responsive{width:90%;height:auto}#scroll{position:fixed;right:10px;bottom:10px;cursor:pointer;width:2.5rem;height:2.5rem;background-color:#3F0;text-indent:-9999px;display:none;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;opacity:.75}#scroll span{position:absolute;top:50%;left:50%;margin-left:-8px;margin-top:-12px;height:0;width:0;border:8px solid transparent;border-bottom-color:#fff}#scroll:hover{background-color:#3C0;opacity:1;filter:"alpha(opacity=100)";-ms-filter:"alpha(opacity=100)"}
I checked the code on https://validator.w3.org/nu/#textarea and it passed. Document checking completed. No errors or warnings to show.
CodePudding user response：
That occurs because you are using Bootstrap 4, but the button link responsible for the toggling of the .dropdown-menu submenu is currently using the associated Bootstrap 5 data toggle attribute instead.
data-toggle vs data-bs-toggle
This should fix it:
<a class="nav-link dropdown-toggle" ... data-toggle=" ...>Photos</a>
Bootstrap 5 uses your current attribute:
<a class="nav-link dropdown-toggle" ... data-bs-toggle=" ...>Photos</a>