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