author Ahmad Muhardian

Cara Cepat Modifikasi Navbar Bootstrap


Ada dua jenis warna pilihan navbar yang ditawarkan Bootstrap: Warna putih (navbar-default) dan warna hitam (navbar-inverse).

Selain dari dua warna tersebut, kita harus memodifikasinya sendiri.

Pada kesempatan ini, saya akan berbagi cara cepat memodifikasi navbar Bootstrap dengan cepat.

1. Menggunakan Generator

Ada sebuah generator canggih yang dibuat oleh Samuel Marchal.

Generator Navbar Bootstrap

Kita dapat menentukan warna navbar bootstrap sesui selera. Kemudian akan diberikan kode CSS, LESS, SCSS, dan SASS yang dapat kita gunakan langsung.

2. Modifikasi nama kelas

Generator akan memberikan nama kelas .navbar-default. Agar tidak bentrok dengan nama asli yang di Bootstrap, kita ganti saja, misalnya menjadi .navbar-teal.

Penggantian nama ini sifatnya opsional, bisa juga tidak dilakukan. Namun, Saya lakukan agar struktur kode di proyek menjadi lebih rapi dan terbaca jelas.

Dengan memanfaatkan Find and Replace di teks editor Atom, saya bisa dengan cepat merubah namanya.

Ganti nama kelas navbar bootstrap

3. Uji Coba

Saya menggunakan codeply untuk mencoba, dan berikut ini hasilnya:

4. Sedikit modifikasi lagi

Masih ada sedikit kekurangan dari kode CSS yang diberikan generator. Coba saja letakkan pointer di atas navbar, tampilannya tidak cocok. Oleh karena itu, kita perlu modifikasi sedikit kode CSS-nya.

.nav > li > a:focus, .nav > li > a:hover {
    text-decoration: none;
    background-color: rgba(255,255,255,0.1);
}

Hasilnya:

Kesimpulan

Generator yang dibuat oleh Samuel ini dapat membantu kita dengan cepat memodifikasi navbar Bootstrap. Namun ada sedikit kekurangan, generator ini belum mampu membuat kode untuk hover (ketika disentuh pointer).

Baca Juga ini

Tutorial Bootstrap: Memahami Fungsi Tag Meta Viewport

Tutorial Bootstrap: Memahami Fungsi Tag Meta Viewport

Tag Meta Viewport adalah tag HTML yang penting bagi Bootstrap untuk membuat halaman web menjadi responsif.

Tutorial Bootstrap: Memahami Sistem Grid untuk membuat Layout

Tutorial Bootstrap: Memahami Sistem Grid untuk membuat Layout

Sistem Grid adalah bagian terpenting yang harus dipahami pada Bootstrap. Apa itu sistem grid? Gimana cara menggunakan sistem grid. Mari kita pelajari!

Tutorial Bootstrap: Pengenalan Dasar Bootstrap untuk Pemula

Tutorial Bootstrap: Pengenalan Dasar Bootstrap untuk Pemula

Pada tutorial ini, kamu akan belajar dasar Bootstrap. Mulai mengenal sejarah bootstrap, hingga mencoba sendiri Bootstrap pada HTML

7 Manfaat Inspect Element Bagi Web Developer

7 Manfaat Inspect Element Bagi Web Developer

Inspect Element merupakan fitur browser yang dibuat untuk memudahkan pengembangan web. Inspect Element dapat kita akses dengan klik kanan, kemudian memilih Inspect Element, atau bisa juga dengan menekan tombol F12. Adapun manfaat dari Inspect Element untuk web Developer adalah sebagai berikut. 1. Tempat Eksperimen CSSSelain ada console Javascript, bisa dibilang di Inspect Elemen juga ada console-nya CSS. Ya, di sana kita bisa eksperimen kode CSS. Sebelum kita menulis kode CSS, sebaiknya gunakan Inspect Element terlebih dahulu.

Apakah Fungsi `!important` pada CSS dan Kapan Harus Menggunakannya?

Apakah Fungsi `!important` pada CSS dan Kapan Harus Menggunakannya?

Memahami fungsi !important pada CSS dan kapan waktu yang tepat menggunakannya?

Mengatasi Peta (Google Map) yang tidak Ditampilkan di Modal

Mengatasi Peta (Google Map) yang tidak Ditampilkan di Modal

Ketika saya menggunakan modal untuk menampilkan peta (Google Maps), petanya tidak mau tampil. Entah mengapa? setelah ukuran layarnya di-resize, petanya bisa tampil. Mungkin karena div di dalam modal bersifat dinamis atau responsif. Peta kosong, hanya ada warna abu-abu. Solusi dari masalah ini saya temukan di Stackoverflow. MarcoK memberikan penjelasan jawaban atas masalah ini. Google Maps memang akan menampilkan area abu-abu (grey) kalau ditempatkan di elemen dinamis. Oleh karna itu, kita perlu memanggil fungsi “resize” ketika animasi modal sudah selesai.