in English

Navbar fɔ di wan dɛn we de

Dokumɛnt ɛn ɛgzampul fɔ Bootstrap in pawaful, rispɔnsiv nevigishɔn hεda, di navbar. Inklud sɔpɔt fɔ branding, nevigishɔn, kolaps plɔgin, ɛn ɔda tin dɛn.

Aw i de wok

Na dis na wetin yu nid fɔ no bifo yu bigin wit di navbar:

  • Navbars nid wan wrapping .navbarwit .navbar-expand{-sm|-md|-lg|-xl}fɔ rispɔnsiv kollaps ɛn kala skim klas dɛn.
  • Navbars ɛn dɛn kɔntinyu na fluid bay difɔlt. Yuz kɔntena dɛn we yu kin pik fɔ stɔp dɛn ɔrizɔntal wit.
  • Yuz wi spays ɛn fleks yutiliti klas fɔ kɔntrol spɛshal ɛn alaynɛshɔn insay navbar dɛn.
  • Navbar dɛn kin ansa bay difɔlt, bɔt yu kin izi fɔ chenj dɛn fɔ chenj dat. Rispɔnsiv bihayvya dipen pan wi Kɔlaps JavaSkript plɔgin.
  • Navbar dɛn de ayd bay difɔlt we dɛn de print. Fos dɛn fɔ print bay we yu ad .d-printdi .navbar. Si di displei yutiliti klas.
  • Mek shɔ se yu gɛt akses bay we yu yuz wan <nav>ɛlimɛnt ɔ, if yu de yuz wan mɔ jenɛrik ɛlimɛnt lɛk a <div>, ad a role="navigation"to ɛvri navbar fɔ sho klia wan se na landmak rijyɔn fɔ di wan dɛn we de yuz ɛp tɛnkɔlɔji dɛn.
Di animashɔn ifɛkt fɔ dis kɔmpɔnɛnt de dipen pan di prefers-reduced-motionmidia kwɛstyɔn. Si di ridyus muvmɛnt sɛkshɔn na wi aksesibiliti dɔkyumentri .

Kɔntinyu dɛn we dɛn sɔpɔt

Navbars kam wit bilt-in sɔpɔt fɔ wan anful sab-kɔmpɔnɛnt dɛn. Pik frɔm dɛn wan ya as nid de:

  • .navbar-brandfɔ yu kɔmni, prɔdak, ɔ prɔjek nem.
  • .navbar-navfɔ wan ful-ayt ɛn laytwɛt nevigishɔn (inklud sɔpɔt fɔ drɔpdɔwn dɛn).
  • .navbar-togglerfɔ yuz wit wi kollaps plɔgin ɛn ɔda nevigishɔn tɔglin bihayvya dɛn.
  • .form-inlinefɔ ɛni fɔm kɔntrol ɛn akshɔn dɛn.
  • .navbar-textfɔ ad string dɛn we gɛt tɛks we gɛt vertikal sɛnt.
  • .collapse.navbar-collapsefɔ grup ɛn ayd navbar kɔntinyu bay wan mama ɛn papa brekpɔynt.

Na dis na wan ɛgzampul fɔ ɔl di sab-kɔmpɔnɛnt dɛn we de insay wan rispɔnsiv layt-tim navbar we de kɔlaps ɔtomɛtik wan na di lg(big) brekpɔynt.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <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">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Dis ɛgzampul de yuz kɔlɔ ( bg-light) ɛn spɛshal ( my-2, my-lg-0, mr-sm-0, my-sm-0) yutiliti klas dɛn.

Mak

Di .navbar-brandkin aplay to bɔku ɛlimɛnt dɛn, bɔt wan ankɔ de wok fayn, as sɔm ɛlimɛnt dɛn kin nid yutiliti klas ɔ kɔstɔm stayl dɛn.

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

If yu ad pikchɔ dɛn to di .navbar-brand, i go mɔs bi se ɔltɛm yu nid kɔstɔm stayl ɔ yutiliti dɛn fɔ mek dɛn saiz fayn fayn wan. Na sɔm ɛgzampul dɛn ya fɔ sho.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Navbar nevigishɔn link dɛn bil pan wi .navopshɔn dɛn wit dɛn yon modifya klas ɛn dɛn nid fɔ yuz toggler klas dɛn fɔ mek dɛn stayl di rayt we fɔ ansa. Nevigishɔn insay navbar dɛn go gro bak fɔ tek bɔku ɔrizɔntal spɛs as pɔsibul fɔ kip yu navbar kɔntinyu dɛn alaynɛd ​​fayn fayn wan.

Aktiv stet dɛn—wit .active—fɔ sho di pej we de naw kin aplay dairekt to .nav-links ɔ dɛn mama ɛn papa we de nia .nav-itemdɛn s.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <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" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Ɛn bikɔs wi de yuz klas fɔ wi nav dɛn, yu kin avɔyd di list-based aprɔch ɔltogɛda if yu want.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

Yu kin yuz drɔpdɔwn dɛn bak na yu navbar. Drɔpdɔwn mɛnyu dɛn nid fɔ rap ɛlimɛnt fɔ posishun, so mek shɔ se yu yuz sɛpret ɛn nɛst ɛlimɛnt dɛn fɔ .nav-itemɛn .nav-linklɛk aw dɛn sho dɔŋ ya.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Fɔm dɛn

Put difrɛn fɔm kɔntrol ɛn kɔmpɔnɛnt dɛn insay wan navbar wit .form-inline.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Wantɛm pikin ɛlimɛnt dɛn fɔ .navbaryuz fleks layout ɛn go difɔlt to justify-content: space-between. Yuz ɔda fleks yutiliti dɛn as nid de fɔ ajɔst dis bihayvya.

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Input grup dɛn de wok, dɛnsɛf:

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

Difrɛn bɔtin dɛn de sɔpɔt as pat pan dɛn navbar fɔm dɛn ya, bak. Dis na big mɛmba bak se dɛn kin yuz vertikal alaynɛshɔn yutiliti fɔ alaynɛd ​​difrɛn saiz ɛlimɛnt dɛn.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <button class="btn btn-outline-success" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

Tɛks

Navbar dɛn kin gɛt bit dɛn fɔ tɛks wit di ɛp we .navbar-text. Dis klas de ajɔst vertikal alaynɛshɔn ɛn ɔrizɔntal spɛshal fɔ string dɛn na tɛks.

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

Miks ɛn mach wit ɔda kɔmpɔnɛnt ɛn yutiliti dɛn as nid de.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

Kɔlɔ skim dɛn

Tim di navbar nɔ ɛva izi tank to di kɔmbaynshɔn fɔ tim klas ɛn background-coloryutiliti. Pik frɔm .navbar-lightfɔ yuz wit layt bakgrɔn kɔlɔ dɛn, ɔ .navbar-darkfɔ dak bakgrɔn kɔlɔ dɛn. Dɔn, kɔstɔmayt wit .bg-*yutiliti dɛn.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Kɔntinɛnt dɛn

Pan ɔl we i nɔ nid, yu kin rap wan navbar insay a .containerfɔ sɛnt am na wan pej. Ɔ yu kin ad kɔntena insay di .navbarfɔ jɔs sɛnt di tin dɛn we de insay wan fiks ɔ statik tɔp navbar .

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

We di kɔntena de insay yu navbar, dɛn kin pul in ɔrizɔntal pad na di brekpɔynt dɛn we smɔl pas di .navbar-expand{-sm|-md|-lg|-xl}klas we yu dɔn spɛsifa. Dis de mek shɔ se wi nɔ de dubl ɔp pan padding we nɔ nid fɔ de pan lɔwa viupɔt dɛn we yu navbar dɔn kol.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

Di ples we dɛn fɔ put am

Yuz wi pozishɔn yutiliti fɔ put navbar dɛn na nɔ-statik pozishɔn dɛn. Pik frɔm fiks to di ɔp, fiks to di bɔt, ɔ stik to di ɔp (skrol wit di pej te i rich ɔp, dɔn i de de). Fiks navbar dɛn de yuz position: fixed, we min se dɛn pul dɛn frɔm di nɔmal flɔ na di DOM ɛn dɛn kin nid kɔstɔm CSS (ɛgz., padding-topna di <body>) fɔ mek dɛn nɔ ɔvalap wit ɔda ɛlimɛnt dɛn.

Notis bak se .sticky-topyuz position: sticky, we nɔ fulɔp fɔ sɔpɔt na ɛvri brawza .

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Default</a>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

We yu de skrol

Ad .navbar-nav-scrollto wan .navbar-collapse(ɔ ɔda navbar sab-kɔmpɔnɛnt) fɔ mek yu ebul fɔ skrol vertikal insay di tin dɛn we yu kin tɔgl na wan navbar we dɔn kol. Bay difɔlt, skrol de kik in na 75vh(ɔ 75% pan di ayt we di viupɔt de), bɔt yu kin ɔvalayz dat wit inlayn ɔ kɔstɔm stayl dɛn. Na big viupɔt dɛn we dɛn dɔn ɛkspɛn di navbar, di tin dɛn we de insay go apia lɛk aw i de apin na difɔlt navba.

Duya mɛmba se dis bihayvya kam wit wan pɔtɛnɛshɛl drawback fɔ overflow—we sɛtin overflow-y: auto(we nid fɔ skrol di kɔntinyu ya), overflow-xna di ikwal to auto, we go krop sɔm ɔrizɔntal kɔntinyu.

Na wan ɛgzampul navbar we de yuz .navbar-nav-scrollwit style="max-height: 100px;", wit sɔm ɛkstra margin yutiliti fɔ optimum spays.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarScroll">
    <ul class="navbar-nav mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Link
        </a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Link</a>
      </li>
    </ul>
    <form class="d-flex">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Di we aw pipul dɛn de biev we dɛn de ansa

Navbar dɛn kin yuz .navbar-toggler, .navbar-collapse, ɛn .navbar-expand{-sm|-md|-lg|-xl}klas dɛn fɔ no ustɛm dɛn kɔntinyu fɔ kol biɛn wan bɔtin. We yu jɔyn wit ɔda yutiliti dɛn, yu kin pik izi wan ustɛm fɔ sho ɔ ayd patikyula tin dɛn.

Fɔ navbar dɛn we nɔ de ɛva kɔlap, ad di .navbar-expandklas na di navbar. Fɔ navbar dɛn we kin ɔltɛm kol, nɔ ad ɛni .navbar-expandklas.

Toggler fɔ di wan dɛn we de chenj

Navbar togglers na lef-alayn bay difɔlt, bɔt if dɛn fala wan brɔda ɛn sista ɛlimɛnt lɛk wan .navbar-brand, dɛn go ɔtomɛtik alaynɛd ​​to di fa rayt. We yu rivɛns yu mak, i go rivɛns di ples we dɛn put di tɔgl. Dis dɔŋ ya na ɛgzampul dɛn bɔt difrɛn stayl dɛn we dɛn kin yuz fɔ tɔgl.

Wit no .navbar-brandsho na di smol brekpoint:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Hidden brand</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Wit wan brand nem we dɛn sho na di lɛft ɛn toggler na di rayt say:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Wit wan toggler na di lef ɛn brand nem na di rayt:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Di tin dɛn we de na do

Sɔntɛnde yu want fɔ yuz di kɔlapshɔn plɔgin fɔ trig wan kɔntena ɛlimɛnt fɔ kɔntinyu we strɔkchɔral wan sidɔm ausayd di .navbar. Bikɔs wi plɔgin de wok pan di idɛn data-targetmaching, dat kin izi fɔ du!

<div class="fixed-top">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

We yu du dis, wi kin advays yu fɔ put ɔda JavaSkript fɔ muv di fɔs programmatik wan to di kɔntena we dɛn opin am. If nɔto dat, di wan dɛn we de yuz kibɔd ɛn di wan dɛn we de yuz ɛp tɛnknɔlɔji dɛn go mɔs gɛt prɔblɛm fɔ fɛn di nyu tin dɛn we dɛn dɔn sho - mɔ if di kɔntena we dɛn bin opin kam bifo di tɔgl na di dɔkyumɛnt in strɔkchɔ. Wi kin advays bak fɔ mek shɔ se di tɔgl gɛt di aria-controlsatribyut, we de pɔynt to di idɔf di kɔntinyu kɔntena. In tiori, dis de alaw di wan dɛn we de yuz di ɛp tɛknɔlɔji fɔ jomp dairekt frɔm di tɔglɔr to di kɔntena we i de kɔntrol–bɔt sɔpɔt fɔ dis naw rili patchy.