Pada artikel sebelumnya kita telah membahas bagaimana Cara Membuat Navbar di Bootstrap 4 .
Sekarang kita akan mencoba memodifikasi sedikit agar tampilan navbar yang telah kita buat menjadi lebih menarik dan terlihat keren.
Persiapan
Untuk langkah pertama kamu harus mempersiapkan file index.php
Kalau bingung bagaimana caranya silahkan baca tutorial ini terlebih dahulu. Tutorial Bootstrap 4 Part #1 : Pengenalan dan Cara Menginstall Bootstrap 4.
Oke sekarang saya anggap kamu sudah punya folder masing-masing di htdocsnya
Kemudian sudah memiliki file index.php
lalu buat 1 buah file lagi bernama style.css
maka struktur foldernya akan seperti ini :
Untuk file index.php isi dengan script berikut ini.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>Lalu file style.css untuk sekarang kita kosongkan saja.
PERHATIKAN ! karena kita menggunakan pemanggilan css dan javascriptnya menggunakan Cdn Bootstrap maka kita harus menggunakan koneksi internet.
Untuk kamu yang ingin memanggil css dan javascriptnya versi offline
kalian juga bisa membaca artikel berikut ini Cara menggunakan Bootstrap Offline.
Menambahkan Navbar Default Bootstrap 4
Setelah persiapan selesai sekarang kita langsung ke prakteknya.
Karena kita akan memodifikasi navbar bawaan bootstrap 4 nya.
jadi kita ambil dulu navbar nya di website resmi bootstrap nya di Navbar Bootstrap 4.
Kemudian Copy kan di dalam body file index.php yang sudah kita buat tadi.
Jadi isi file index.php kita seluruh nya menjadi seperti ini :
index.php
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Hello, world!</title>
</head>
<body>
<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="#" 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>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>Save dan hasilnya website kita akan menjadi seperti ini.
Membuat Navbar Bootstrap Menjadi Rata Tengah
Navbar bawaan bootstrap 4 nya telah muncul.
Tapi disini saya akan sedikit terganggu dengan lebar dari navbar nya
sepertinya diberi jarak antara kiri dan kanan nya lebih bagus.
mari kita coba.
Tambahkan class container tepat dibawah kode ini
<nav class="navbar navbar-expand-lg navbar-light bg-light">
dan berikat tag penutup div nya di atas kode ini
</nav>
Dan file index.php seluruhnya akan menjadi seperti ini.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<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="#" 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>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>Save dan coba kita lihat lagi bagaimana hasilnya.
Widih sekarang udah terlihat lebih rapi dan enak dipandang mata yakan.
Mengubah Navbar Menjadi Transparant.
Lanjut lagi. jadi disini saya mau mengganti background navbar nya
yang sekarang berwarna putih menjadi transparan.
caranya kamu hapus class yang bernama bg-light
di kode ini
<nav class="navbar navbar-expand-lg navbar-light bg-light">
Sehingga kode nya menjadi seperti ini
<nav class="navbar navbar-expand-lg navbar-light ">
Simpan coba kita lihat dulu perubahannya.
Navbar kita sekarang sudah tidak memiliki background.
Tetapi karena background nya berwarna putih jadi hasil nya tidak terlalu terlihat.
Untuk itu kita coba merubah warna background dari body website kita.
Cara nya buka file style.css
kemudian tambahkan kode dibawah ini :
/* merubah warna background body menjadi biru */
body {
background-color: skyblue !important;
}Jangan lupa save lalu lihat perubahannya.
Yuhu sekarang backgroundnya sudah berwarna biru. dan Warna dari background navbarnya juga berwarna biru yang artinya sudah tidak memiliki warna alias tranparent.
Merubah Warna Tulisan dalam Navbar
Navbar kita udah jadi warna biru tadi kan ya.
tapi karena warnanya sedikit gelap . jadi warna text yang sekarang hitam terlihat tidak jelas dimata.
Jadi saya ingin merubah warna tulisan yang ada pada semua anchor atau menu link yang ada pada navbar kita.
tambahkan kode style dibawah ini di file style.css kita tadi tepat dibawah tanda tutup kurung }
/* merubah warna tulisan */
a {
color :white !important;
}Simpan file style.css nya dan lihat hasilnya.
uhh terlihat lebih soft bukan
tetapi ada kenala sedikit nih disini karena kita merubah warna nya menjadi putih sekarang kalau kita klik menu dropdownnya juga ikutan putih.
Merubah Warna Background Dropdown Menu
karena tulisan dan background nya putih jadi tulisan nya tidak terlihat.
mari kita ubah background menu dropdownnya supaya tulisannya terlihat lebih jelas.
dengan menambahkan kode di bawah ini
/* merubah warna background body menjadi biru */
body {
background-color: skyblue !important;
}
/* merubah warna tulisan */
a {
color :white !important;
}
/* merubah warna background dropdown */
.navbar-expand-lg .navbar-nav .dropdown-menu {
position: absolute;
background-color: #12b5bd;
}
/* merubah warna hover */
.dropdown-item:focus, .dropdown-item:hover {
color: #16181b;
text-decoration: none;
background-color: #2dc2ca;
}
Tralala sekarang terlihat lebih indah lagi. apa lagi di saat hover atau disentuh mouse warna masing-masing menunya berbeda lagi.
Membuat Dropdown Terbuka Otomatis
Saya ingin menunya itu terbuka otomatis jika disentuh mouse jadi tidak hanya di klik mouse saja.
Tambahkan kode dibawah ini di dalam file style.css kita tadi
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}Save lagi kemudian lihat website kita.
Sentuh pada bagian dropdown menu kita tetapi jangan di klik.
Terlihat dropdown menjadi terbuka hanya dengan menyentuh nya dengan mouse saja.
Menghilangkan Icon Panah di Menu Dropdown
Tetapi ada lagi nih yang aneh karena kita sudah membuat dropdownya terbuka otomatis.
Maka tidak perlu lagi icon panah atau bottom arrow di samping tulisan dropdown nya.
Sekarang kita coba hilang kan dengan menambahkan kode berikut ini
/* menghilangkan tanda panah kebawah (bottom arrow) */
a.menu:after, .dropdown-toggle:after {
content: none;
}Save dan lihat hasilnya
Terlihat tanda panah nya sudah hilang
Merubah Posisi Menu menjadi ke kanan
Seperti yang kita lihat posisi antara menu dan logo atau tulisan website kita terlalu rapat.
jadi lebih baik posisi menunya kita samakan saja dengan posisi search yang ada pada kanan website kita.
cara nya cukup mudah kita hanya perlu merubah kode ini
<ul class="navbar-nav mr-auto">
Menjadi seperti ini
<ul class="navbar-nav ml-auto">
Sehingga kalau di save maka tampilan navbar kita menjadi seperti ini
Penutup
Sudah lumayan banyak juga ya yang kita modifikasi
Walaupun masih banyak lagi yang harus kita modifikasi supaya sesuai lagi dengan keinginan kita.
Artikel ini akan terus di update secara berkala agar navbar kita menjadi lebih baik lagi.
Sekian Semoga Bermanfaat
