in English

ናቭባር

ሰነዳትን ኣብነታትን ናይቲ ሓያልን ምላሽ ዝህብን ርእሲ ምድህሳስ Bootstrap ዝኾነ navbar። ንብራንድንግ፡ ናቪጌሽንን ካልእን ዝኸውን ደገፍ ዘጠቓልል ኮይኑ፡ ንናይ ምፍራስ ፕላግ-ኢንና ደገፍ ሓዊሱ።

ኣብዚ ገጽ

ከመይ ይሰርሕ

ቅድሚ ብናቭባር ምጅማርካ ክትፈልጦም ዘለካ ነገራት ኣብዚ ኣለዉ፤

ናቭባርስ ንመልሲ ዝህብ ምፍራስን ሕብራዊ ስኬምን ክፍልታት .navbarምስ ምጥቕላል የድልዮም ።.navbar-expand{-sm|-md|-lg|-xl|-xxl}
ናቭባርን ትሕዝቶኦምን ብነባሪ ፈሳሲ እዩ። ነቲ መትሓዚ ብዝተፈላለየ መንገዲ ንኣግማድ ስፍሓቶም ንምድራት ቀይርዎ ።
ኣብ ውሽጢ navbars ንዘሎ ርሕቀትን ኣሰላልፋን ንምቁጽጻር ናይ ርሕቀትን ፍሌክስን ዩቲሊቲ ክፍልታትና ተጠቐም ።
ናቭባር ብነባሪ ምላሽ ዝህቡ እዮም፡ ግን ብቐሊሉ ክትቅይሮም ትኽእል ኢኻ ነዚ ክትቅይሮ። ምላሽ ዝህብ ባህሪ ኣብቲ ናይ Collapse JavaScript ፕላግ-ኢንና ይምርኮስ።
ሓደ ባእታ ብምጥቃም ተበጻሕነት ምርግጋጽ <nav>ወይ ድማ ከም a ዝኣመሰለ ዝያዳ ሓፈሻዊ ባእታ እንተተጠቒምካሉ፡ ኣብ ነፍሲ ወከፍ ናቭባር <div>a ወሲኽካ role="navigation"ንተጠቀምቲ ሓጋዚ ቴክኖሎጂታት ከም ምልክት ዞባ ብግልጺ ከተለልዮ።
aria-current="page"ንናይ ሕጂ ገጽ ወይ aria-current="true"ንናይ ሕጂ ኣቕሓ ኣብ ሓደ ስብስብ ብምጥቃም ነቲ ናይ ሕጂ ኣቕሓ ኣመልክት ።
ሓድሽ ኣብ v5.2.0: Navbars ብ CSS ተለዋዋጢ ናብ .navbarመሰረታዊ ክፍሊ ስፍሓት ዘለዎም ቴማ ክኾኑ ይኽእሉ። .navbar-lightን .navbar-darkCSS ተለዋዋጢ ዋጋታት ኣብ ክንዲ ተወሳኺ ቅዲታት ምውሳኽ ንምግዳፍ ዳግማይ ተጻሒፉ ኣሎ።

ናይዚ ኣካል ተንቀሳቓሲ ውጽኢት ኣብቲ ናይ prefers-reduced-motionሚድያ ሕቶ ዝምርኮስ እዩ። ኣብቲ ናይ ተበጻሕነት ሰነድና ኣብቲ ዝተቐነሰ ምንቅስቓስ ዝብል ክፍሊ ርአ ።

ዝድገፍ ትሕዝቶ

ናቭባር ንውሑዳት ንኡሳን ኣካላት ኣብ ውሽጡ ዝተሃንጸ ደገፍ ሒዞም ይመጹ። ከም ኣድላይነቱ ካብዞም ዝስዕቡ ምረጹ፤

.navbar-brandንናይ ትካልኩም፡ ፍርያትኩም ወይ ስም ፕሮጀክትኩም።
.navbar-navንሙሉእ ቁመትን ቀሊል ክብደትን ዘለዎ ምምራሕ (ንቁልቁል ዝወርድ ደገፍ ሓዊሱ)።
.navbar-togglerምስ ናይ ምፍራስ ፕላግ-ኢንናን ካልእ ናይ ምድህሳስ ምቕያር ባህርያትን ንኽትጥቀመሉ።
ንዝኾነ ቅጥዒ ቁጽጽርን ተግባራትን ዝኸውን ፍሌክስን ስፔሲንግን ዩቲሊቲታት።
.navbar-textንምውሳኽ ብቐጥታ ማእከል ዝገበሩ ሕብረ ቃላት ጽሑፍ።
.collapse.navbar-collapseንትሕዝቶታት navbar ብወላዲ ምብታኽን ንምጉጅጃልን ንምሕባእን እዩ።
.navbar-scrollንሓደ ንምቕማጥን ዝተሰፍሐ ትሕዝቶ ናቭባር ንምስግጋርንmax-height ኣማራጺ ወስኽ ።

lgኣብቲ (ዓቢ) ነጥቢ ምብታኽ ብኣውቶማቲክ ዝፈርስ ምላሽ ዝህብ ብርሃን-ቴማ ዘለዎ ናቭባር ዝተኻተቱ ኩሎም ንኡሳን ባእታታት ኣብነት ኣብዚ ኣሎ ።

html ዝብል ጽሑፍ ኣሎ።

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </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">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

እዚ ኣብነት እዚ ድሕረ ባይታ ( bg-light)ን ርሕቀትን ( me-auto, mb-2, mb-lg-0, me-2) ዩቲሊቲ ክፍልታት ይጥቀም።

ስም ምህርቲ

እቲ .navbar-brandኣብ መብዛሕትኦም ባእታታት ክውዕል ይኽእል እዩ፣ ግን ሓደ መልህቕ ዝበለጸ ይሰርሕ፣ ገለ ባእታታት ናይ ዩቲሊቲ ክፍልታት ወይ ብሕታዊ ቅዲታት ክጠልቡ ስለ ዝኽእሉ።

ጽሑፍ

ጽሑፍካ ኣብ ውሽጢ ሓደ ባእታ ምስቲ .navbar-brandክፍሊ ወስኸሉ።

html ዝብል ጽሑፍ ኣሎ።

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

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

ስእሊ

ኣብ ውሽጢ እቲ ዘሎ ጽሑፍ .navbar-brandብ <img>.

html ዝብል ጽሑፍ ኣሎ።

<nav class="navbar bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
    </a>
  </div>
</nav>

ምስልን ጽሑፍን

ብተወሳኺ ገለ ተወሳኺ ዩቲሊቲታት ተጠቒምካ ምስልን ጽሑፍን ኣብ ሓደ እዋን ክትውስኽ ትኽእል ኢኻ። .d-inline-blockምውሳኽን .align-text-topኣብ ልዕሊን ኣስተውዕል <img>።

html ዝብል ጽሑፍ ኣሎ።

<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

ናቭ

ናቭባር ናይ ምድህሳስ መላግቦታት ኣብ .navኣማራጺታትና ምስ ናይ ገዛእ ርእሶም መቐየሪ ክፍሊ ዝሃንጹ ኮይኖም ንግቡእ ምላሽ ዝህብ ቅዲ ምጥቃም ናይ ቶግለር ክፍልታት ይጠልቡ። ኣብ ናቭባር ምዝዋር እውን ትሕዝቶታት ናቭባርካ ብውሑስ መንገዲ ንኽስለፍ ብዝተኻእለ መጠን ብዙሕ ኣግማድ ቦታ ንምሓዝ ክዓቢ እዩ ።

ነቲ ናይ ሕጂ ገጽ ንምምልካት ነቲ .activeክፍሊ on ወስኸሉ ።.nav-link

aria-currentኣብቲ ንጡፍ ’ ውን ነቲ ባህሪ ክትውስኾ ከም ዘለካ ኣስተውዕል .nav-link።

html ዝብል ጽሑፍ ኣሎ።

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Home</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>
  </div>
</nav>

ከምኡ’ውን ንናቭታትና ክፍልታት ስለ እንጥቀም፡ እንተደሊኹም ካብቲ ኣብ ዝርዝር ዝተመርኮሰ ኣገባብ ምሉእ ብምሉእ ክትርሕቑ ትኽእሉ ኢኹም።

html ዝብል ጽሑፍ ኣሎ።

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled">Disabled</a>
      </div>
    </div>
  </div>
</nav>

ኣብ ናቭባርካ ውን ንቑልቁል ዝወርድ ነገራት ክትጥቀም ትኽእል ኢኻ። ንቑልቁል ዝወርድ ምልክታታት ንኣቀማምጣ መጠቕለሊ ባእታ የድልዮም፣ ስለዚ ንኣቀማምጣን ከምቲ ኣብ ታሕቲ .nav-itemዘሎን ዝተፈላለዩን ዝተሰፍሩን ባእታታት ምጥቃምካ ኣረጋግጽ ።.nav-link

html ዝብል ጽሑፍ ኣሎ።

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Home</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-bs-toggle="dropdown" aria-expanded="false">
            Dropdown 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><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

ቅጥዕታት

ዝተፈላለዩ ናይ ቅጥዒ ቁጽጽርን ኣካላትን ኣብ ውሽጢ ሓደ ናቭባር ኣቐምጥ፤

html ዝብል ጽሑፍ ኣሎ።

<nav class="navbar bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

ቅጽበታዊ ውላድ ባእታታት ናይ .navbarኣጠቓቕማ ፍሌክስ ኣቀማምጣን ብነባሪ ናብ justify-content: space-between. ነዚ ባህሪ ንምትዕርራይ ከም ኣድላይነቱ ተወሳኺ ፍሌክስ ዩቲሊቲስ ተጠቐም።

html ዝብል ጽሑፍ ኣሎ።

<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

ናይ እታዎት ጉጅለታት እውን ይሰርሑ እዮም። ናቭባርካ ምሉእ ቅጥዒ እንተኾይኑ፡ ወይ መብዛሕትኡ ቅጥዒ እንተኾይኑ፡ ነቲ <form>ባእታ ከም መትሓዚ ክትጥቀመሉን ገለ ኤችቲኤምኤል ክትዕቅቦን ትኽእል ኢኻ።

html ዝብል ጽሑፍ ኣሎ።

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

ዝተፈላለዩ መጠወቒታት ከም ኣካል ናይዞም ናቭባር ቅጥዕታት ይድገፉ እዮም፣ ንሳቶም እውን። እዚ ውን ቨርቲካል ኣሰላልፋ ዩቲሊቲታት ዝተፈላለዩ ዓቐን ዘለዎም ባእታታት ንምስላፍ ክጥቀሙ ከም ዝኽእሉ ዓቢ መዘኻኸሪ እዩ።

html ዝብል ጽሑፍ ኣሎ።

<nav class="navbar bg-light">
  <form class="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

ጽሑፍ

ናቭባር ብሓገዝ ናይ .navbar-text. እዚ ክፍሊ ንሕብረ ቃላት ጽሑፍ ቀጥታዊ ኣሰላልፋን ኣግማድ ርሕቀትን የስተኻኽል።

html ዝብል ጽሑፍ ኣሎ።

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

ከም ኣድላይነቱ ምስ ካልኦት ኣካላትን ዩቲሊቲታትን ምትሕውዋስን ምትሕውዋስን ።

html ዝብል ጽሑፍ ኣሎ።

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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>
  </div>
</nav>

ሕብራዊ ስርዓታት

ሓድሽ ኣብ v5.2.0: Navbar theming ሕጂ ብCSS variables ዝሰርሕ ኮይኑ .navbar-lightካብ ቀደም ጀሚሩ ኣሎ። .navbarተለዋዋጢ CSS ኣብ , ብነባሪ ናብቲ “ብርሃን” መልክዕ ይትግበሩ ፣ ብ .navbar-dark.

ሳላ ቡትስትራፕ ዝሰርሖ ውህደት ናይ ሳስን ሲኤስኤስን ተለዋዋጢ ረቛሒታት ናቭባር ቴማታት ካብ ዝኾነ እዋን ንላዕሊ ቀሊል ኮይኑ ኣሎ። .navbar-darkእቲ ነባሪ ምስ ፍኹስ ዝበለ ሕብርታት ድሕረ ባይታ ንኽትጥቀመሉ “ብርሃን ናቭባር”ና እዩ፣ ግን ንጸሊም ድሕረ ባይታ ሕብርታት እውን ከተመልክት ትኽእል ኢኻ ። ድሕሪኡ፡ ምስ .bg-*ዩቲሊቲታት ምምዕርራይ።

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

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

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

ኮንተይነራት

ዋላ እኳ ኣድላዪ እንተዘይኮነ፡ ንሓደ ናቭባር ኣብ ሓደ ክትጠቕልሎ ትኽእል ኢኻ .containerኣብ ሓደ ገጽ ማእከል ንምግባር–ዋላ እኳ ውሽጣዊ መትሓዚ ጌና ከምዘድሊ ኣስተውዕል። ወይ ድማ ትሕዝቶ ናይ ሓደ ጽኑዕ ወይ ስታትቲክ ላዕለዋይ ናቭባር.navbar ጥራይ ማእከል ንምግባር ኣብ ውሽጢ መትሓዚ ክትውስኽ ትኽእል ኢኻ ።

html ዝብል ጽሑፍ ኣሎ።

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

ኣብ ናቭባርካ ዘሎ ትሕዝቶ ክሳብ ክንደይ ሰፊሕ ከም ዝቐርብ ንምቕያር ዝኾነ ካብቶም ምላሽ ዝህቡ መትሓዚታት ተጠቐም።

html ዝብል ጽሑፍ ኣሎ።

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

ምምዳብ

ንናቭባር ኣብ ዘይስታትቲክ ቦታታት ንምቕማጥ ናይ ፖዚሽን ዩቲሊቲታትና ተጠቐም ። ካብ ጽኑዕ ናብ ላዕሊ፡ ጽኑዕ ናብ ታሕቲ፡ ተጣቢቑ ኣብ ላዕሊ (ምስ ገጽ ክሳብ ኣብ ላዕሊ ዝበጽሕ፡ ድሕሪኡ ኣብኡ ይጸንሕ)፡ ወይ ተጣቢቑ ናብ ታሕቲ (ምስ ገጽ ክሳብ ታሕቲ ዝበጽሕ፡ ድሕሪኡ ይጸንሕ) ምረጽ ኣብቲ).

ጽኑዓት navbars ይጥቀሙ ፣ ማለት ካብ ንቡር ዋሕዚ ናይ DOM ይስሓቡን ምስ ካልኦት ባእታታት position: fixedንኸይደራረቡ ብሕታዊ CSS (ንኣብነት padding-topኣብ ) ከድልዮም ይኽእል እዩ።<body>

html ዝብል ጽሑፍ ኣሎ።

<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>

html ዝብል ጽሑፍ ኣሎ።

<nav class="navbar fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>

html ዝብል ጽሑፍ ኣሎ።

<nav class="navbar fixed-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>

html ዝብል ጽሑፍ ኣሎ።

<nav class="navbar sticky-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>

html ዝብል ጽሑፍ ኣሎ።

<nav class="navbar sticky-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</a>
  </div>
</nav>

ስክሮሊንግ ምግባር

ኣብ ውሽጢ እቲ ዝቕየር ትሕዝቶታት ናይ ሓደ ዝተዓጽወ ናቭባር ቀጥታዊ ምዝዋር ንምንቅስቓስ .navbar-nav-scrollናብ ሓደ (ወይ ካልእ ንኡስ ኣካል ናቭባር) ወስኽ ። .navbar-navብነባሪ፡ ምዝዋር ኣብ 75vh(ወይ 75% ናይ ቪውፖርት ቁመት) ይጅምር፡ ግን ነዚ ብናይ ከባቢ CSS ብሕታዊ ንብረት --bs-navbar-heightወይ ብሕታዊ ቅዲታት ክትሽፍኖ ትኽእል ኢኻ። ኣብ ዓበይቲ ቪውፖርትታት እቲ ናቭባር ምስ ዝሰፍሕ፡ ትሕዝቶ ከምቲ ኣብ ነባሪ ናቭባር ዝረአ ክረአ እዩ።

በጃኻ ኣስተውዕል እዚ ባህሪ ምስ ክኸውን ዝኽእል ጕድለት ከም ዝመጽእ ኣስተውዕል overflow—ምቕማጥ overflow-y: auto(ኣብዚ ትሕዝቶ ንምስግጋር ዘድሊ)፣ overflow-xማዕረ ናይ auto፣ ገለ ኣግማድ ትሕዝቶ ክቖርጽ ከሎ።

.navbar-nav-scrollኣብዚ ምስ ዝጥቀም ኣብነት navbar ኣሎ style="--bs-scroll-height: 100px;", ምስ ገለ ተወሳኺ ወሰን ዩቲሊቲታት ንዝበለጸ ርሕቀት።

html ዝብል ጽሑፍ ኣሎ።

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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-bs-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" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

ምላሽ ዝህቡ ባህርያት

ናቭባር ትሕዝቶኦም ብድሕሪ ሓደ መጠወቒ መዓስ ከም ዝፈርስ ንምፍላጥ .navbar-toggler, .navbar-collapse, ከምኡ’ውን ክፍልታት ክጥቀሙ ይኽእሉ ። .navbar-expand{-sm|-md|-lg|-xl|-xxl}ምስ ካልኦት ዩቲሊቲታት ተደሚሩ፡ ፍሉያት ባእታታት መዓስ ከም እተርኢ ወይ ከም እትሓብእ ብቐሊሉ ክትመርጽ ትኽእል ኢኻ።

ንዘይፈርሱ ናቭባር .navbar-expand፡ ኣብቲ ናቭባር ዘሎ ክፍሊ ወስኹሉ። ኩሉ ግዜ ዝፈርሱ navbars ዝኾነ .navbar-expandክፍሊ ኣይትውሰኹ።

ቶግለር

Navbar togglers ብነባሪ ብጸጋም ይስለፉ፣ ግን ከም a ዝኣመሰለ ናይ ሓው ባእታ እንተተኸቲሎም .navbar-brand፣ ብኣውቶማቲክ ናብ ርሑቕ የማናይ ክስለፉ እዮም። ናትካ ምልክት ምግልባጥ ንኣቀማምጣ ናይቲ ቶግለር ንድሕሪት ይመልሶ። ኣብ ታሕቲ ኣብነታት ዝተፈላለዩ ቅዲታት ምቕያር ኣለዉ።

.navbar-brandኣብቲ ዝነኣሰ ነጥቢ ምብታኽ ዝኾነ ምስ ዝተራእየ፤

html ዝብል ጽሑፍ ኣሎ።

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

ብጸጋም ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት

html ዝብል ጽሑፍ ኣሎ።

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

ብጸጋም ቶግለር ብየማን ድማ ስም ምልክት ንግዲ (brand name) ዘለዎ፤

html ዝብል ጽሑፍ ኣሎ።

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

ናይ ደገ ትሕዝቶ

ሓደ ሓደ ግዜ ካብቲ .navbar. ምኽንያቱ ናትና ፕላግ-ኢን ኣብቲ idand data-bs-targetmatching ስለ ዝሰርሕ፡ እዚ ብቐሊሉ ይግበር!

ዝተዓጽወ ትሕዝቶ

ብመንገዲ navbar ምልክት ምቕያር ይከኣል።

html ዝብል ጽሑፍ ኣሎ።

<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">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

እዚ ክትገብር ከለኻ፡ ፎኮስ ምስ ተኸፍተ ብፕሮግራም ናብቲ ኮንተይነር ንምግዓዝ ተወሳኺ ጃቫስክሪፕት ከተካትት ንመክር። እንተዘይኮይኑ፡ ተጠቀምቲ ቁልፊ ሰሌዳን ተጠቀምቲ ሓጋዚ ቴክኖሎጂታትን ነቲ ሓድሽ ዝተጋህደ ትሕዝቶ ንምርካብ ክጽገሙ ተኽእሎ ኣሎ - ብፍላይ እቲ ዝተኸፍተ ኮንተይነር ኣብ ኣቃውማ ናይቲ ሰነድ ቅድሚ እቲ ቶግለር እንተመጺኡ። ብተወሳኺ እቲ ቶግለር ነቲ ባህሪ ከም ዘለዎ ከተረጋግጽ ንመክር ፣ ናብቲ ናይቲ ትሕዝቶ መትሓዚ aria-controlsብምምልካት ። idብክልሰ-ሓሳብ፡ እዚ ተጠቀምቲ ሓጋዚ ቴክኖሎጂ ብቐጥታ ካብቲ ቶግለር ናብቲ ዝቆጻጸሮ ኮንተይነር ክዘሉ የኽእሎም–ግን ኣብዚ እዋን’ዚ ነዚ ዝድግፍ ምሉእ ብምሉእ ምትፍናን’ዩ።

ካብ ካንቫስ ወጻኢ

ነቲ ዝሰፍሕን ዝፈርስን ናቭባርካ ናብቲ ካብ ካንቫስ ወጻኢ ዝኾነ ሳጹን ቀይሮ ። ንኽልቲኦም ናይ offcanvas ነባሪ ቅዲታት ነስፍሖምን ክፍልታትና ተጠቒምና .navbar-expand-*ዳይናሚክን ተዓጻጻፍን ናይ ምድህሳስ ጎድናዊ መስመር ንፈጥር።

ኣብዚ ኣብ ታሕቲ ዘሎ ኣብነት፡ ኩሉ ግዜ ኣብ ኩሉ ምብታኽ ነጥብታት ዝፈርስ offcanvas navbar ንምፍጣር፡ ነቲ .navbar-expand-*ክፍሊ ምሉእ ብምሉእ ግደፎ።

html ዝብል ጽሑፍ ኣሎ።

<nav class="navbar bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</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-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </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>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

ኣብ ፍሉይ ነጥቢ ምብታኽ ናብ ንቡር ናቭባር ዝሰፍሕ offcanvas navbar ንምፍጣር ከም lg, ተጠቐም .navbar-expand-lg።

<nav class="navbar navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

ኣብ ጸሊም ናቭባር offcanvas ክትጥቀም ከለኻ፡ እቲ ጽሑፍ ዘይንበብ ከይከውን ኣብቲ offcanvas ትሕዝቶ ጸሊም ድሕረ ባይታ ክህልወካ ከም ዝኽእል ኣስተውዕል። ኣብዚ ኣብ ታሕቲ ዘሎ ኣብነት ፡ ብጸሊም ኦፍካንቫስ ብግቡእ ቅዲ ንኽህልወና .navbar-darkand .bg-darkto the .navbar, .text-bg-darkto the .offcanvas, .dropdown-menu-darkto .dropdown-menu, and .btn-close-whiteto ንውስኽ።.btn-close

html ዝብል ጽሑፍ ኣሎ።

<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</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-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <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>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

ሲኤስኤስ

ተለዋዋጢ ረቛሒታት

ኣብ v5.2.0 ተወሰኸ

ከም ኣካል ናይቲ Bootstrap ዝምዕብል ዘሎ CSS ተለዋዋጢ ኣቀራርባ፡ navbars ሕጂ .navbarንዝተዓጻጸፈ ናይ ሓቂ ግዜ ምምዕርራይ local CSS variables on ይጥቀሙ። ክብርታት ናይ CSS ተቐያየርቲ ብመንገዲ Sass ይቕመጡ፣ ስለዚ Sass ምምዕርራይ ጌና ይድገፍ እዩ፣ ንሱ እውን።

  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
  --#{$prefix}navbar-color: #{$navbar-light-color};
  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

ገለ ተወሳኺ CSS ተለዋዋጢ ረቛሒታት እውን ኣብ .navbar-nav:

  --#{$prefix}nav-link-padding-x: 0;
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

ብCSS ተለዋዋጢ ረቛሒታት ኣቢልና ምምዕርራይ ኣብቲ ክፍሊ ክርአ ይከኣል .navbar-darkኣብኡ ፍሉያት ክብርታት ተደጋገምቲ CSS መምረጺታት ከይወሰኽና ንገፍፎም።

  --#{$prefix}navbar-color: #{$navbar-dark-color};
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

ሳስ ተለዋዋጢ ረቛሒታት

ተለዋዋጢ ንኹሎም navbars፤

$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;

$navbar-light-color:                rgba($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);
$navbar-light-brand-color:          $navbar-light-active-color;
$navbar-light-brand-hover-color:    $navbar-light-active-color;

ተለዋዋጢ ንጸሊም ናቭባር :

$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);
$navbar-dark-brand-color:           $navbar-dark-active-color;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color;

ሳስ ሉፕ

ምላሽ ዝህቡ navbar expand/collapse classes (ንኣብነት, .navbar-expand-lg) ምስቲ $breakpointsካርታ ተዋሃሂዶም ብመንገዲ ሉፕ ኣብ scss/_navbar.scss.

// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    // stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
      @include media-breakpoint-up($next) {
        flex-wrap: nowrap;
        justify-content: flex-start;

        .navbar-nav {
          flex-direction: row;

          .dropdown-menu {
            position: absolute;
          }

          .nav-link {
            padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
            padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }

        .offcanvas {
          // stylelint-disable declaration-no-important
          position: static;
          z-index: auto;
          flex-grow: 1;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          background-color: transparent !important;
          border: 0 !important;
          transform: none !important;
          @include box-shadow(none);
          @include transition(none);
          // stylelint-enable declaration-no-important

          .offcanvas-header {
            display: none;
          }

          .offcanvas-body {
            display: flex;
            flex-grow: 0;
            padding: 0;
            overflow-y: visible;
          }
        }
      }
    }
  }
}