I am trying to create a collapsible Bootstrap navbar. The toggle does not appear when i resize the browser. I tried changing the codes around to what I have seen on other forums like grouping my logo and buttons, however that messes up the layout. I would greatly appreciate any help, Thank you!
@media (max-width: 991.98px) {
.collapse {
position: fixed;
top: 56px; /* Height of navbar */
bottom: 0;
left: 100%;
width: 100%;
padding-right: 1rem;
padding-left: 1rem;
overflow-y: auto;
visibility: hidden;
background-color: #343a40;
transition: visibility .3s ease-in, -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in, visibility .3s ease-in-out;
transition: transform .3s ease-in, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.collapse.open {
visibility: visible;
-webkit-transform: translateX(-100%);
transform: translateX(-100%)
}
}<div class=".container-fluid"><nav role="navigation" class="navbar navbar-expand-md fixed-top navbar-dark bg-dark"><a class="navbar-brand mr-auto mr-lg-0" href="./index.html"><img src="./images/logo.svg" class="logo" alt="sultry silk logo"></a><button class="navbar-toggle collapse p-0 border-0" type="button" data- toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><span class="navbar-toggler-icon"></span></button><div class="navbar-collapse collapse" id="navbar"><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link" href="./index.html" class="buttons">Home<span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="./Icons.html" class="buttons">Icons</a></li><li class="nav-item"><a class="nav-link" href="./tech.html" class="buttons">Technology</a></li><li class="nav-item"><a class="nav-link" href="./sustain.html" class="buttons">Sustainability</a></li><li class="nav-item"><a class="nav-link" href="./culture.html" class="buttons">Politics & Culture</a></li></ul><form class="form-inline my-2 my-lg-0"><button class="btn btn-sm btn-outline-secondary my-2 my-sm-0" type="submit">Subscribe</button></form></div></nav>```