Navbar boostrap 4 Using collapse trigger bar and navigation bar

Question

Im trying to achive an boostrap navbar toggle and the nav bar together like this site have: https://www.tennis.org.il/

this is what i wrote,it work when i get md size and the toggle appear, but the navbar disapear.

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">

  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
    aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation" style="background-color:white;">
    <span class="navbar-toggler-icon"></span>
  </button>

  <a class="navbar-brand" href="/">
    <img style="vertical-align: 0;margin-left:5px;" src="https://www.tennis.org.il/assets/icon/home-icon.svg">
  </a>
  <div style="justify-content: space-between" class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">

      <a class="nav-item nav-link" href="/centers">מרכזי הטניס</a>
      <a class="nav-item nav-link" href="/tennis">המגרש המקצועי</a>
      <a class="nav-item nav-link" href="/community"> המגרש החברתי</a>
      <a class="nav-item nav-link" href="/club">המועדון</a>
      <a class="nav-item nav-link" href="/update">עדכונים</a>
    </div>

    <div style="padding:10px;">
      <img style="height:1.5rem" src="https://www.tennis.org.il/assets/img/tel-icon.png">

      <a style="color:#405277;padding:1rem;" href="tel:1234">*8721</a>

    </div>
  </div>

</nav>

i tried to change the class name of nav to navbar navbar-toggleable-lg , or sm but its vanish the navbar and show only the toggle bar and i want to show them together