Bootstrap 5 navbar dropdown links don't work on small screens <576px
Question
I'm new to this. I have a working navbar with dropdown that has 3 links. After expansion, the dropdown links display a card upon clicking (cards show contact info), and all works fine...except for when I go to mobile view below <576px.
I've used a template with CDNs directly from Boostrap for CSS, Javascript bundle, and Icons.
Why does this work, but it becomes not responsive once below <576px ????
Soon as I go greater than >576px it works again. This is driving me nuts.
<!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.0" /> <!-- Bootstrap CSS CDN --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> <!-- Bootstrap Icons CDN --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" /> <style> .bg-dark-transparent { background-color: rgba(0, 0, 0, 0.5); } </style> <title>Bio Website</title> </head> <body class="vh-100 bg-dark text-light"> <!-- NAVIGATION --> <nav class="navbar navbar-expand-md navbar-dark fixed-top"> <div class="container-fluid"> <a href="#" class="navbar-brand"><span class="badge bg-danger shadow">Joe Noobie</span></a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarMain"> <ul class="navbar-nav me-auto mb-2 mb-lg-0" style="z-index: 10"> <li class="nav-item"> <a href="" class="nav-link active" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="about contact" >Info</a > </li> <li class="nav-item"> <a href="#about" role="button" class="nav-link" data-bs-toggle="collapse" aria-expanded="false" aria-controls="about" >About</a > </li> <li class="nav-item"> <a href="#contact" role="button" class="nav-link" data-bs-toggle="collapse" aria-expanded="false" aria-controls="contact" >Contact</a > </li> </ul> </div> </div> </nav> <!-- HEADER --> <header class="container fixed-top text-end mt-5"> <!-- HEADER > About & Contact dropdown content --> <div class="row mt-3"> <!-- About --> <div class="col-md-6 mt-3"> <div class="collapse multi-collapse" id="about"> <div class="card card-body text-start shadow bg-dark-transparent"> <h5 class="card-title text-danger">About</h5> <div class="card-text"> <h3 class="text-white-50 ms-3">Joe Noobie</h3> <ul class="list-unstyled ms-5"> <li>CEO of Noobie Media</li> <li>Web Developer</li> <li>Tech Support</li> <li>Graphic Designer</li> </ul> </div> </div> </div> </div> <!-- Contact --> <div class="col-md-6 mt-3"> <div class="collapse multi-collapse" id="contact"> <div class="card card-body text-start shadow bg-dark-transparent"> <h5 class="card-title text-danger">Contact</h5> <div class="card-text"> <h3 class="text-white-50 ms-3">Get in touch:</h3> <ul class="list-unstyled ms-5"> <li><i class="bi bi-house me-2 text-danger"></i>City: The City</li> <li><i class="bi bi-signpost me-2 text-danger"></i>Street: 21 Jump Str.</li> <li><i class="bi bi-telephone me-2 text-danger"></i>Phone: +555-555-555</li> <li> <i class="bi bi-envelope me-2 text-danger"></i>Email: JoeNoobie@Noobalicious.com </li> </ul> </div> </div> </div> </div> </div> </header> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous" ></script> </body> </html>
1 answers
solution1
0 ACCPTED 2022-07-10 16:41:01
Remove the "fixed-top" class from nav and header tags , removing this class makes the tags rendered one-after the other in the default "static" positioning way.
<nav class="navbar navbar-expand-md navbar-dark">
<header class="container text-end mt-5">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap navbar dropdown links don't work in Safari
Bootstrap navbar links don't work
Slick slider Responsive breakpoints not working at 576px
Problems with Bootstrap: Navbar collapse on small screens ( mobile) does not work
Summernote dropdown doesn't work with Bootstrap navbar
My bootstrap nav dropdown for small screens is not working
Bootstrap small window navbar dropdown not working
Flask - Bootstrap Navbar Dropdown doesn't work on sub page
Why bootstrap dropdown doesn't work if navbar has fixed height?
Links with dropdown menus don't show up, links without dropdown menus still work
Related Tags