Seperti yang kita ketahui, salah satu fitur navigation bar (navbar) yang disediakan oleh framework bootstrap adalah navbar-inverse.
Navbar inverse merupakan navbar yang berwarna hitam. Jadi bila kita memerlukan navbar dengan background hitam, cukup gunakan navbar inverse tersebut. Kita tidak perlu repot-repot menggunakan jenis navbar-default(warna defaultnya abu-abu) lalu dimodifikasi background-nya.
Navbar inverse akan memberikan warna hitam seperti yang ditunjukkan oleh Gambar.1 dibawah ini :
Untuk melihat kode apa yang membuat navbar-inverse menjadi hitam, kita dapat melakukan inspect element pada browser. Dalam contoh ini, kita menggunakan google chrome. Untuk inspect elementnya, klik kanan pada browser lalu pilih inspect. Kemudian sorot tepat pada navigation bar yang berwarna hitam, seperti yang ditunjukkan oleh Gambar.2 dibawah ini :
Jika kita perhatikan Gambar.2 diatas, maka kode yang membuat warna hitam pada navbar-inverse adalah :
.navbar-inverse {
background-color: #222;
border-color: #080808;
}Nah, sekarang sudah mendapatkan petunjuknya dimana background-color:#222 akan membentuk background berwarna hitam.
Jadi untuk merubah menjadi warna yang kita inginkan cukup dirubah dengan kode warna lain. Misal, kita menginginkan warna biru, bisa diset dengan kode:
.navbar-inverse {
background-color: #3F51B5;
border-color: #3F51B5;;
}Source code lengkap modifikasi warna navbar-inverse
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial Merubah Warna Navbar Inverse</title>
<!-- Bagian css -->
<link rel="stylesheet" href="assets/css/bootstrap.css">
<script src="assets/js/jquery-1.10.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<style>
.navbar-inverse {
background-color: #3F51B5;
border-color: #3F51B5;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Dunia Informatika</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Bootsrap</a></li>
<li><a href="#">Angular JS</a></li>
<li><a href="#">Ionic</a></li>
</ul>
</div>
</nav>
<div class="container">
<h3>Contoh Navbar Inverse</h3>
<p>An inverted navbar is black instead of gray.</p>
</div>
</body>
</html>