toggle button seen on desktop view

Question

<nav class="navbar navbar-expand-md navbar-light bg-primary">
  <a class="navbar-brand" href="#">Brand</a>
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarSupportedContent">
        <span class="navbar-toggler-icon"></span>
      </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
        <li class="nav-item active">Home</li>
    </ul>
    </div>
</nav>

with the code above i can still see the toggle button while i view the page in desktop

http://prntscr.com/i3sawk please take a look in screenshot upload in the link above. — Ujjwal Shakya, Jan 22 '18 at 07:11

score 1 · Answer 1 · answered Jan 22 '18 at 07:23

1

Try: instead of navbar-toggle class use navbar-toggler for button class

answered Jan 22 '18 at 07:23

vic

134
1
11

score 0 · Accepted Answer · answered Jan 22 '18 at 07:27

You have used wrong class name in your toggle button. Use navbar-toggler instead of navbar-toggle

Reference Link bootstrap4 navbar

Stack Snippet

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-light bg-primary">
  <a class="navbar-brand" href="#">Brand</a>
  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarSupportedContent">
        <span class="navbar-toggler-icon"></span>
      </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">Home</li>
    </ul>
  </div>
</nav>

toggle button seen on desktop view

2 Answers2