Struggling with making the hamburger menu appear on my friend's site. Spent hours trying to troubleshoot, but still can't figure out why it's only showing up as a red box and appearing on larger screens instead of just smaller devices. Frustrating!
<!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, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script type="text/javascript" src="script/script.js"></script>
<title>Bootstrap</title>
</head>
<body class="darkbg">
<nav class="navbar navbar-expand-lg navbar-white d-flex justify-content-center">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar-dropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link nvm-link current-link" href="index.html"> NVM </a>
</li>
<li class="nav-item">
<a class="nav-link non-active-link" href="gallery.html"> GALLERY </a>
</li>
<li class="nav-item">
<a class="nav-link non-active-link" href="shop.html"> SHOP </a>
</li>
<li class="nav-item">
<a class="nav-link non-active-link" href="#"> MUSIC </a>
</li>
<li class="nav-item">
<a class="nav-link non-active-link" href="#"> CONTACT </a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid full-height">
<div class="row">
<div class="col-lg-6">
<div class="home-article">
<h2 class="home-header flexFont">WHO THE HELL ARE WE?</h2>
<p class="text-indent main-text"> Hell is full, of all the torturing, screaming, killing, fire, smoke, and poker games a demon could ask for. Unforunately, Satan had no interest in giving us what we needed to have a successful business in the underworld, and most of the other
demons laughed in our faces or ignored us. </p>
<p class="text-indent main-text"> Nobody in hell cared about us, and why would they? It's fucking hell, but me and my cool ass friends knew we deserved more than that. So, we sought out to find the prophesied portal to the surface realm. And guess what bitches, WE FOUND IT!
</p>
<p class="text-indent main-text"> After we celebrated, we closed the portal to prevent any lames from rising above and stealing our awesome idea, We were gonna make this business happen in a world where people care about looking badass(almost everone in hell is pretty badass).</p>
<p class="text-indent main-text"> After we arrived, you humans didn't really take kindly to a bunch of unholy beasts trying to sell you shit, understandable. So we did some research, removed our horns, and made ourselves some awesome masks. <br> NOW WE LOOK LIKE YOU! BOOM! </p>
<p class="text-indent main-text"> You're welcome, it took a lot of soul for us to demote ourselves to your standard so you could buy our gold, so have some fucking empathy. Look at our art, buy our clothes and other cool ass merchandise, sign up for our newsletter too while
you're at it. </p>
<p class="text-indent main-text"> Don't worry. We don't want to kill you, without you we serve no purpose. We just want to spread our noise surface-wide(and then maybe eat your soul, if you're a poser). </p>
<p class="text-indent main-text bottom-text"> Welcome to <a class="text-red" href="#"> NVM </a>, the home of the designer demons.</p>
</div>
</div>
<div class="col-lg-6">
<img class="demon-pic" src="" alt="IMAGE OF THE SEVEN OF US DRAWN AS OUR DEMONS">
</div>
</div>
</div>
</body>
</html>
This is the CSS I added:
.navbar-toggle {
background-color: transparent;
background-image: none;
border: 1px solid transparent;
}
.navbar-toggle .icon-bar {
background-color: red;
}