I'm completely new to this. I managed to set up a functional navbar with a dropdown feature that consists of 3 links. When expanded, each dropdown link displays a card upon clicking, revealing contact information. Everything works perfectly fine...except for one issue I encounter when the viewport width goes below <576px.
For my project, I utilized a template with CDNs directly sourced from Bootstrap for CSS, JavaScript bundle, and Icons.
Despite everything functioning as intended, I can't seem to figure out why the responsiveness breaks down once the viewport width is less than <576px?
Strangely, if I increase the size back to greater than >576px, everything starts working again. This inconsistency is making me go crazy.
<!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f1939e9e858285839081b1c4dfc1dfc3">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88a87879c9b9c9a8998c5818b87869ba8d9c6ddc6d8">[email protected]</a>/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="collaps...