Hey there, I'm having an issue with my navigation bar. I want to make the burger icon only visible when the screen size is below 768px, but it keeps showing up no matter how big the screen is. I'm using Bootstrap 4.
What I really need is a responsive navbar that displays the Home, About, and other links when the screen size is above 768px, rather than having them hidden behind the burger button.
Here's the code snippet I'm working with:
<body>
<nav class="navbar nav-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a href="#" class="navbar-brand"
><img src="img/logo.png" alt="logo.png"
/></a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ml-auto" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Services</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
Any help or suggestions would be greatly appreciated. Thank you!