Minggu, 22 Juni 2014
Hai gan! kali ini ane mau ngasih tau caranya Mengubah Ukuran Navbar di Template CSS Framework Bootstrap. Apa itu Bootstrap? Cek sendiri disini ya.. hehehe. Mungkin beberapa dari kalian bingung, Gimana sih cara ubah Ukuran Navbar nya? kok udah ane ganti nilai ini itu tapi tetep aja gak berubah >.<. Kalo memang agan bingung, nih ane kasih tutorialnya gimana cara ubah ukuran Navbar Template si Bootstrap ini... oke simak ya :)
~Step by Step~
1. Pertama, Buka CSS Template nya (CSS yang belum di Minify alias belum di Convert.. Pokoknya cari CSS yg belakangnya nda ada .min Tentu saja CSS Utama ya, ntar css lainnya lagi.. hehe)2. Kedua, Cari dan Ubah Ukuran Konten Navbar nya seperti Brand, Menu, dkk.
Dibawah ini adalah Kode CSS Komponen Navbar nya :
Brand => .navbar-brand {
Text => .navbar-text {
Menu => .navbar-nav > li > a {
Form => .navbar-form {
Button => .navbar-btn { atau .navbar-btn.btn-sm { atau .navbar-btn.btn-xs {
Cara Ubah Ukurannya : Setelah Kode CSS Komponen diatas ditemukan, Cari Kode ini :
- padding-top
- padding-bottom
- line-height
Kemudian ganti Nilainya Sesuai yang diinginkan. Jangan lupa ya nilainya harus sama semua antara Komponen Menu, Form, Button dan lain lainnya :)
3. Setelah semua komponen selesai diubah, Sekarang Waktunya Ubah Ukuran Navbarnya. Oke Cari Kode CSS Navbar dibawah ini :
.navbar4. Kemudian tinggal Sesuaikan Nilai min-height nya sampai Ukuran Tinggi navbarnya pas dengan ukuran Komponen nya
5. Sudah selesai, Jangan Lupa disimpan... hehehe. Sekarang coba cek Ukuran Navbarnya, Berubah kan? :)
Cukup Mudah kan gan? hehe Oke Sekian dari ane, apabila ada Pertanyaan silahkan Ajukan dibawah... :)
justru backgoundnya itu(yang berwarna abu-abu) yang punya saya terlalu sempit, gimana lebarinnya
BalasHapus