Ilmu Membuat Sticky Navigasi Bar (Navbar) Bootstrap Keren

Label: , , , ,
MembuatNavbarCara Membuat Sticky Navigasi Bar Bootstrap Pada Blogger - Hallo sobat ilmu kita, sekarang kita mau share bagaimana membuat menu navigasi di blogger dengan bootstrap. Jika sobat belum tahu, boleh baca disini - Penggunaan Bootstrap Pada Styling Web. Nah setelah Kita memanggil css bootstrapnya (lewat tutorial barusan ya guys), Sekarang waktunya ikuti tutorial ini.

Sebelum memasuki ke tutorial, Kita harus tahu sebelumnya di blog Kita sudah ada navigasi barnya atau belum. Contohnya seperti berikut:




Nah, Keren Bukan. Oke berikut adalah Cara membuatnya

Copy Code Html berikut dibawah code <body pada blogspot/web :

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

  <div class="collapse navbar-collapse" id="navbardrop">
    <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="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <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" href="#" tabindex="-1" aria-disabled="true">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>

Nah setelah itu cobalah maka akan muncul seperti di blog saya ini. Ketika di scroll kebawah, Maka navbar akan mengikuti dan berpindah ke element paling atas di blog. Untuk Settingnya,

  • href="#" ganti sesuai link yang akan di tuju
  • Jika menunya kurang, silahkan tambahkan setelah kode berikut

<li class="nav-item">
 <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>


  • Selesai
Terimakasih Semoga Membantu Kita Semua

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)