删除/关闭页脚导航中的切换折叠

Question

I am new to using bootstrap and am trying to add a footer social nav to my portfolio - I have tried removing different classes and tried the sticky footer, but it's not ideal for what I'm designing. The footer nav shows nicely on desktop but once I resize it down to Tablet/phone, it shows the hamburger menu (which of course, does not open) - I just have the social icons and no text, so they should fit fine in the footer. How do I prevent the hamburger menu from showing up on the smaller screens? This 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>

Answer 1

Hide the hamburger by default and set it to show on larger displays.

.navbar-toggler {
    display: false;
}

@media (min-width: 1024px) {
    .navbar-toggler {
        display: block;
    }
}

Answer 2

add this in your style:

/* Here 500px is small screen size. change it as per your requirement */

@media screen and (max-width: 500px){
    .navbar-toggler {
        display: none;
    }
}