Hiding the navbar toggle button for large and medium scale device

Question

I am trying to develop a responsive website using bootstrap, in which I am designing a navbar which contains a toggle button that should only show up when the browser is squeezed to -sm scale device.

I tried to hide it by giving my button a class as visible-sm, it didn't work. The toggle button is always visible no matter whatever be the screen size, I want this button only to be visible in small screen size.

<button class="navbar-toggler visible-sm" data-toggle="collapse" data-target="#navbarMenu">
    <span class="navbar-toggler-icon"></span>
</button>

my jfiddle link: https://jsfiddle.net/t1yodsxf/

Sebastian Brosch Sebastian Brosch · Accepted Answer · 2019-05-04T11:03:18

To show the button only on sm screen size you can use the classes d-none d-sm-block d-md-none. The button is now only visible on sm screen size, not on smaller (xs) or larger (>= md) screen sizes:

<button class="navbar-toggler d-none d-sm-block d-md-none" data-toggle="collapse" data-target="#navbarMenu">
    <span class="navbar-toggler-icon"></span>
</button>

To show the button only on the xs screen size you can use the classes d-block d-sm-none:

<button class="navbar-toggler d-block d-sm-none" data-toggle="collapse" data-target="#navbarMenu">
    <span class="navbar-toggler-icon"></span>
</button>

The visible-sm class is not available on Bootstrap. There is only a visible and invisible class to set the visibility of an element.

Hiding the navbar toggle button for large and medium scale device

1 Answers