membuat Background Navbar Fullwidth pada Bootstrap 4

28/09/2018    Maykhel David    164     Website

Membuat Background Navbar Fullwidth Bootstrap – Dengan adanya peningkatan fitur pada bootstrap 4, banyak sekali perubahan yang terjadi pada framework responsive paling popular ini. Salah satunya adalah pada navbar, dari beberapa kasus sebenarnya tidak sulit untuk melakukan kustomisasi pada navbar di bootstrap versi terbaru ini, namun ada beberapa mungkin dari teman – teman yang masih belajar bootstrap 3 namun ingin langsung memakai bootstrap 4, salah satu kasus yang ingin saya bahas adalah tentang bagaimana cara membuat navbar fullwidth di bootstrap 4.
Selain itu, saya juga akan memberikan trik untuk membuat navbar-right (item menu berada di sebelah kanan). Karena class navbar-right pada bootstrap 4 sudah dihapus.

Baiklah teman-teman pertama kita buat struktur html seperti berikut

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
</head>
<body>
    
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
</body>
</html>

Selanjutnya kita akan membuat struktur html untuk navbar dengan baris kode berikut

<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
    <div class="container">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link">Left Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link">Left Link 2</a>
    </li>
  </ul>
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link">Right Link 1</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 on Right</a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action with a lot of text inside of an item</a>
      </div>
    </li>
  </ul>
  </div>
</nav>

Yang terakhir, kita akan memberikan sedikit CSS untuk menyesuaikan  menu yang ada di sebelah kanan

.navbar-nav {
      flex-direction: row;
    }
    
    .nav-link {
      padding-right: .5rem !important;
      padding-left: .5rem !important;
    }
    
    .ml-auto .dropdown-menu {
      left: auto !important;
      right: 0px;
    }

 Baiklah teman -teman    jika sudah coba kalian lihat di browser, maka akan terlihat  backgroundnavbar menjadi full width. Demikian artikel kali ini yang membahas tentang cara Membuat Background Navbar Fullwidth Bootstrap, bagi kalian yang masih belajar bootstrap, artikel ini bisa dijadikan referensi untuk mempelajari bootstrap 4, Semoga bermanfaat

 

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More