For contex, I am using HTML, and CSS (with Bootstrap 5 through the CDN connected link/script tags) to create a front-end responsive static website.My issue is that when the toggler is expanded, it is supposed to turn into an "X", but instead nothing happens. How do I fix this?
I have included the navbar code just in case its helpful.
.navbar { background-color: rgba(220, 20, 60, 0.9); --bs-navbar-padding-y: 0 !important;}.navHT { background: none; text-decoration: none; padding-right: 4rem;}/* *** START OF NAVBAR TOGGLER *** */.navbar-toggler { width: 20px; height: 20px; position: relative; transition: 0.5s ease-in-out;}.navbar-toggler, .navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler-icon:focus { outline: none; box-shadow: none; border: 0 !important;}.navbar-toggler span { margin: 0; padding: 0;}.toggler-icon { display: block; position: absolute; height: 3px; width: 100%; background: white; border-radius: 1px; opacity: 1; left: 0; transform: rotate(0turn); transition: 0.25s ease-in-out;}/* .middle-bar {margin-top: 0px;}/* when nav is clicked: */.navbar-toggler .top-bar { margin-top: 0px; transform: rotate(0.375turn);}.navbar-toggler .middle-bar { opacity: 0; filter: opacity(0%);}.navbar-toggler .bottom-bar { margin-top: 0px; transform: rotate(0.625turn);}/* state when navbar is collapsed: */.navbar-toggler.collapse .top-bar { margin: 0px; margin-top: -20px; transform: rotate(0turn);}.navbar-toggler.collapse .middle-bar { opacity: 1; margin: 0px; filter: opacity(100%);}.navbar-toggler.collapse .bottom-bar { margin-top: 20px; transform: rotate(0turn);}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script><nav class="navbar navbar-dark navbar-expand-lg"><div class="container-fluid" style="padding: 0 !important; margin: 0 !important;"><a href="" class="navbar-brand mb-0 h1"><img class="d-sm-inline-block align-top d-none logo" src="companynameimages/Company-vosb-logo.jpeg" width="160" height="30"></a><a href="" class="navbar navHT" style="color: white">Company Name</a><button class="navbar-toggler collapse d-flex d-lg-none flex-column justify-content-around" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="toggler-icon top-bar"></span><span class="toggler-icon middle-bar"></span><span class="toggler-icon bottom-bar"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item"><a href="" class="nav-link active" aria-current="page">About</a></li><li class="nav-item dropdown"><button href="" class="nav-link active dropbtn">Services<div class="dropdown-content"><span><a class="dropdown-item dropdown-content active" href="">Service One</a><br><a class="dropdown-item dropdown-content active" href="">Service Two</a></span></div></button></li><li class="nav-item active"><a class="nav-link active contact" href="/Users/elisecarlson/coding/name/companyName/contact.html" target="_blank">Contact</a></li><!-- <li class="nav-item active"><form action="" class="d-flex"><input type="text" class="form-control me-2"><button type="submit" class="btn btn-outline-light">Search</button></form></li> --></ul></div></div></nav>I've tried changing the numbers (with the units "turn") in the css property transform: rotate(), but nothing happens. I've searched the internet and Bootstrap docs but haven't been able to figure it out.I looked at this post several SO posts, but they didn't seem to solve my issue (unless I missed something).