Navbar ekleme işlemini başarıyla gerçekleştirdik. Şimdi sıra geldi navbarı düzenlemeye. Öncelikle navbara ait linkleri düzenlemekle işe başlayalım. Navbar kodu içindeki
<a class="navbar-brand" href="#">Navbar</a>
kodunu siliyoruz. Bunu yapmamın sebebi navbar içerisinde logoya gerek olmamasıydı. Şimdi üst menüye bir arkaplan rengi vermeliyiz. #5a6079
hex kodunda bir renk seçtim. Bu değişikliği aşağıdaki CSS kodu ile sağlayacağız. Ancak bunu yapmadan önce <nav class="navbar navbar-expand-lg navbar-light bg-light">
kodundaki üstü turuncu renkle çizilmiş olan bg-light
seçicisini silmeliyiz. Bu seçici, navbara arkaplan rengi veren seçicidir. Bu seçici yerine biz kendi istediğimiz rengi belirten seçiciyi ekleyeceğiz. Şu şekilde bir CSS kodu yazıyoruz. .arkaplan-rengi{
background:#5a6079!important;
}
Yukarıdaki resimde olduğu gibi CSS kodu <b:skin><![CDATA[ ]]></b:skin>
etiketleri arasına yazıyoruz. Daha sonrasında ise bg-light
yerine arkaplan-rengi
seçicisini ekliyoruz ve temayı kaydediyoruz. Navbarın arkaplan renginin değiştiğini görüyoruz. Şimdi link isimlerini ve bağlantıları(href) değiştirebiliriz. Değiştirme işlemini kendi istediğinize göre yapın, href kısmı ise şimdilik boş kalabilir.Navbar Ortalama
Farkettiyseniz eğer navbar linkleri ekranın en köşesinden itibaren başlıyor, sağ tarafında köşesinde ise arama kutusu var. Bir blog için bu genişlik fazla bu sebeple navbarı ortalamamız gerekiyor. O yüzden resimde olduğu gibi bir değişiklik yapıyorum.
Öncelikle navbar kodunu, <div class="container"> </div>
etiketi içerisine aldık. Bu sayede navbar ortalanmış oldu.Temaya Arkaplan Ekleme
Navbarı düzenlemeye devam etmeden önce temaya bir arkaplan belirlemekte yarar var. Küçük bir araştırma sonucu şöyle bir site buldum. (transparent textures) Bu site içerisinde bulunan desenlerden bir tanesini seçtim ve indirdim. Daha sonrasında resmi upload edip, resim url adresini aşağıdaki CSS kodunda kullandım.
body{
background:url("resim url adresi");
}
Şimdi sıra linklere ait özellikleri kaldırmaya geldi. Bu özellikler link kodu içerisinde yer alan active, disabled gibi özelliklerdir. Resimde olduğu gibi bu özellikleri kaldırıyorum. Navbar Yazı Tipi
Menü linklerinin rengi beyaz(#ffffff) olacak. Yazı tipi boyutu ise 14px. Font ise "PT Sans" olacak. Ancak "PT Sans" fontunu doğrudan font-family olarak veremeyiz çünkü font Blogger'da yok. Bu yüzden fontu tema içerisine eklemeliyiz. Google Fonts sitesine giriyoruz. Beğenilen bir fontu "Select this font" butonu ile seçiyoruz.
Daha sonrasında embed kodu kopyalanıp, <head>
etiketi içerisine eklenir. Artık "PT Sans" fontu temada kullanılabilir. Şimdi CSS kodu ile menünün font yapısını değiştirelim.nav a{
font-size: 15px;
color: #fff!important;
font-family: 'PT Sans', sans-serif;
}
Gerekli değişiklikler sağlanmıştır. Sıra geldi linkleri isim olarak düzenlemeye. Ben linkleri "Ana Sayfa", "Hakkında", "Dersler" ve "İletişim" olarak değiştirdim. Bu değişiklikten sonra başlarına isimlere uygun icon ekleyeceğiz. Maalesef Bootstrap 4 sürümü ile glyphicons özelliği kalktı, bu nedenle Font Awesome kullanacağız. Şu linke tıklayın.Artık font awesome temada kullanılabilir. Şimdi şu linkten linklere uygun iconlar seçiyoruz.
Yukarıdaki resimde yaptığım işlemi diğer linkler içinde uyguluyorum. Arama kutusundaki search butonunda yazan "search" yazısını silip, search iconu ekliyoruz.
Dropdown Menü Düzenleme
Dropdown yani açılır menüyü biraz daha özelleştirmek istiyorum. Bu sebeple temanın CSS bölümüne aşağıdaki kodu yazdım.
@media (min-width: 992px){
.dropdown-menu {
margin-top: 8px!important;
background: #000!important;
border-top-left-radius: 0px!important;
border-top-right-radius: 0px!important;
margin-left: -30px!important;
opacity: 0.5!important;
}}
.dropdown-menu {
background: #000!important;
opacity: 0.5!important;
}
a.dropdown-item:hover {
color:#555!important;
}
Arama Kutusu Düzenleme
Arama kutusu için ilk önce kod kısmını düzenlememiz gerek. Tema kodunda CTRL+F yaparakbtn-outline-success
seçicisini bulup siliyoruz. Bu işlemden sonra CSS kod kısmına aşağıdaki kodları yazıyorum. placeholder içerisinde yazan Search değerini, "Ara.." olarak değiştiriyorum. @media (min-width: 576px){
.mr-sm-2, .mx-sm-2 {
margin-right: 0px!important;
}}
.form-control{
border-radius:0!important;
border-bottom-left-radius: 3px!important;
border-top-left-radius: 3px!important;
border:none!important;
padding: 3px 3px!important;
font-size: 14px!important;
}
.btn{
border-radius:0!important;
border-bottom-right-radius: 3px!important;
border-top-right-radius: 3px!important;
padding: 2px 5px 2px 5px!important;
font-size: 14px!important;
}
Tüm bu işlemlerden sonra navbar videoda görüldüğü gibi olacak.Bu derse ait tema kodunu görmek için tıklayınız. Bir diğer yazıda header yapımını gerçekleştireceğiz.
icon eklemeyi sizin yaptığnız gibi yapıyorum ama bende iconun resmi çıkmıyor nerde ynalış yapıyorum
YanıtlayınSilKodları görmeden net bir şey söylemem mümkün değil. Font Awesome kütüphanesinin kullanımı değişmiş olabilir. Güncel haline uygun şekilde kullanmanız gerekir.
SilFont Awesome dan alırken icon'un ücretsiz olduğundan emin ol yoksa gözükmüyor
Silmerhaba yazınız çok güzel teşekkürler
YanıtlayınSilHerşeyi adım adım yaptım ama navbar'ı daraltamadım. Muhtemelenbir yeri eksik anlatıyorsun.
YanıtlayınSilHayır, eksik anlatmıyorum. Sadece belli şeyleri gösterdim. Burada spesifik olarak bir kişiye özel tema yapılmıyor. Gerisi yapmak isteyen kişiye kalıyor, mesela Google. İyi günler.
Sil