Bilişim alanında yazı yazarken yazılara başlık atmak oldukça zor olabiliyor. Bu yazıya İngilizce bir başlık bulmak isteseydim “How to overwrite Bootstrap’s navbar CSS” gibi bir şeyler yazardım ve tam da amacına hizmet ederdi. Bunu Türkçe’ye çevirmenin (Bootstrap’in navbar CSS’inin ya da seçicisinin üzerine yazmak gibi bir şey.) pek hoş olmayacağını düşündüm. Konuyu gereksiz yere uzattığımın farkındayım ancak içimde kalmasın dedim :)
Bootstrap’i artık duymayan web developer bulmak mümkün değil sanırım. Bununla birlikte Bootstrap’in en önemli özelliklerinden birisinin de hazır CSS kodları ile bir çok öğenin önceden şekillendirildiğini biliyoruz, aynı Bootstrap navbar (navigasyon menüsü)’da olduğu gibi. Söz konusu navbar’a istediğiniz şekli vermek için Bootstrap’in kullanmış olduğu şablonu az çok bilmek gerekir. Burada tüm seçicilerden bahsetmem zor ancak en azından navbar’ı dilediğiniz gibi şekillendirebilmeniz için oluşturduğum şablonu paylaşabilirim.
Navbar’ın Önceki (Varsayılan) Şekli
Bootstrap Navbar Default CSS
Navbar’ın Güncellenmiş Şekli
Bootstrap Navbar Redesigned CSS
HTML Kodu
HTML dosyasında yukarıdaki navbar için aşağıdaki kodları kullandım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="collapse navbar-collapse" id="menu-1"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">WORK</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">CONTACT</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav><!-- /.navbar-default --> |
CSS Kodu
Çalışmanız için oluşturacağınız CSS dosyasında aşağıdaki CSS kodlarını kullanarak gerekli düzenlemeyi yapabilirsiniz. Yukarıdaki mor navgisyon menüsünü aşağıdaki kod ile şekillendirdim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/* NAVBAR BEGIN ************************ */ .navbar-default { border-style:none; background-color: transparent; margin-top:50px; } .navbar-default .navbar-brand { width:130px; height:45px; background: url(../img/logo.png) no-repeat; text-indent: -999em; } .navbar-default .navbar-nav > li{ background-color: #87509c; border-radius:8px; margin-left:10px; } .navbar-default .navbar-nav > li > a{ color:#ffffff; border-radius:8px; } .navbar-default .navbar-nav > li > a:hover { background-color: #643a79; color:#ffffff; } .navbar-default .navbar-nav > li.active > a, .navbar-default .navbar-nav > li.active > a:hover, .navbar-default .navbar-nav > li.active > a:focus { background-color: #643a79; color:#ffffff; } /* NAVBAR END ************************ */ |
