I've recently started using bootstrap and I'm having some trouble adding a social nav footer to my portfolio. I've experimented with removing different classes and even tried using the sticky footer feature, but it's not quite what I need for my design. The footer navigation displays perfectly on desktop, but when I resize the screen to Tablet or phone size, the hamburger menu appears (even though it doesn't function). I only want to display the social icons without any text, so they should fit nicely in the footer. How can I prevent the hamburger menu from showing on smaller screens? Here is the code I have for the footer:
<footer>
<nav class="navbar navbar-expand-lg navbar-dark navigation-bg bottom">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center">
<ul class="navbar-nav footer-social">
<li class="nav-item active">
<a href="https://www.instagram.com/emquebuena"><i class="fab fa-instagram instagram"></i></a>
</li>
<li class="nav-item">
<a href="https://github.com/emkaygru"><i class="fab fa-github github"></i></a>
</li>
<li class="nav-item">
<a href="https://codepen.io/emkaygru"><i class="fab fa-codepen codepen"></i></a>
</li>
<li class="nav-item">
<a href="https://vm.tiktok.com/ZMJAqMJ5m/"><i class="fab fa-tiktok tiktok"></i></a>
</li>
</ul>
</div>
</nav>
</footer>