Divi'de Duyarlı Navigasyon Menünüzü Düzeltme

Tüm ekran boyutlarında harika görünen duyarlı bir gezinme menüsü oluşturmak zor olabilir. Keşke bu kadar önemli olmasaydı, ancak navigasyon normalde sitenizin her sayfasının en üstünde olduğu için her sayfada ilk görünen şeydir. Bu yüzden doğru almak önemlidir. Neyse ki Divi'nin tema özelleştiricisi, ana menüyü oldukça havalı başlık seçenekleriyle özelleştirmenize olanak tanır. Ancak logosu solda ve menü bağlantıları sağda olan varsayılan menü stili için, özellikle başlığı dolduran çok fazla bağlantınız olduğunda, işler daha küçük ekran boyutlarında kolayca karıştırılabilir. Benim için çok şey olduğunu biliyorum. Menüyü masaüstü için tam olarak görüyorum ve sonra bir tablette (özellikle bir iPad Pro) kontrol ediyorsunuz ve logo menüyle örtüşüyor ve bazı bağlantılar bir satır aşağı atlıyor.

Bugün, çok yaygın olmayan ekran boyutlarında bile harika görünmeleri için bu kalabalık gezinme menüleri için size bazı yararlı çözümler vereceğim. Sonuçta, en azından bazı kullanıcılar için sitenizin güvenilirliği buna bağlıdır.

Başlayalım.

Divi'de Duyarlı Navigasyon Menünüzü Düzeltme

Youtube Kanalımıza Abone Olun

Kalabalık Navigasyon Menüsü için Dört Çözüm

Divi ile ilgili harika şeylerden biri, sitenizin stilini farklı ekran boyutlarına göre ayarlamak için medya sorgularını (bölmeli CSS) kullanan bir akışkan ızgara düzeni üzerine kurulmuş olmasıdır. Bu ayarlamaların yapıldığı nokta bizim kesme noktaları dediğimiz noktadır. Ana gezinme menünüzü TÜM ekran boyutlarında mükemmelleştirmeye kararlıysanız, medya sorgularını kullanarak menünüzü özelleştirmeniz ve belirli kesme noktalarını ayarlamanız gerekebilir.

Sorun

Divi'nin varsayılan gezinme menüsünü kullanırken karşılaştığım en yaygın sorun, bir müşterinin çok sayıda üst düzey menü öğesi istemesidir. Ana gezinme menüsünde 5'ten fazla menü öğesi (veya büyük yazı tipi boyutuna sahip menü öğeleri) olması, ekran boyutu 980-1100 piksel (küçük dizüstü bilgisayarların boyutu) arasında bir genişliğe ulaştığında genellikle bir satır sonu ve büyütülmüş logo oluşturur. ve büyük tabletler). Daha önce fark etmemiş olsanız bile, bu sorunu daha önce yaşadığınıza eminim. Şuna benziyor:

Uygun değil. Şimdi bu sorunun dört çözümüne bakalım.

1. Çözüm: Menü Çubuğunu Tam Genişlikte Yapın

Normalde, sitemin geri kalanını da tam genişlikte yapmıyorsam, gezinme menünüzü tam genişlikte yapmanızı önermem. Tasarımda tutarlılığın önemli olduğunu düşünüyorum. Ancak bazen, navigasyon menünüzün tüm cihazlarda harika görünmesi anlamına geliyorsa, bu iyi bir uzlaşmadır. Ve aynı zamanda basit bir düzeltmedir.

Tema Özelleştirici > Başlık ve Gezinme > Birincil Menü Çubuğu'na gidin ve Tam Genişlik Yap'ı seçin.

2. Çözüm: Logo ve Yazı Tipi ayarlarını yapın.

Sorununuza başka bir basit çözüm, varsayılan Logo Maksimum Yüksekliği, Metin Boyutu veya Yazı Tipi seçeneklerini ayarlamak için tema özelleştirici ayarlarını kullanmaktır.

Bu seçenekleri ayarlarken dikkatli olun çünkü kolay bir düzeltme yapmak adına Logonuzun veya menü öğelerinizin tasarımından ve okunabilirliğinden asla ödün vermek istemezsiniz.

3. Çözüm: Mobil menüyü yeni bir kesme noktasında görüntüleme.

Divi içindeki kesme noktalarının her biri için genel aralıklar şunlardır:

Büyük Masaüstü: 1405 piksel ve üzeri
Standart Masaüstü: 1100 piksel ile 1405 piksel arasında
Dizüstü Bilgisayarlar ve Büyük Tabletler: 980 piksel ile 1100 piksel arasında
Tabletler: 768 piksel ile 980 piksel arasında
Akıllı telefonlar ve küçük Tabletler: 320 piksel ile 768 piksel arasında;
Akıllı telefonlar: 320 piksel ile 480 piksel arasında;

Varsayılan navigasyon menüsünün mobil menüye dönüştüğü (hamburger nav ile) kesme noktası 980 pikseldir. 980 pikselden küçük herhangi bir ekran boyutu mobil menüyü gösterecektir.

Ancak, herhangi bir garip menü satırı kesintisinden kaçınmak istiyorsanız, kesme noktasını farklı bir değere değiştirirsiniz. Diyelim ki mobil menüyü 980 piksel yerine 1024 piksel civarında görüntülemek istiyorsunuz. Bunu yapmak için Divi'deki varsayılan stili geçersiz kılmak için bir medya sorgusunun içine bazı özel CSS eklemeniz gerekir.

Tema Özelleştirici > Ek CSS'ye gidin ve aşağıdakileri girin:

@media (max-width: 1024px) {
 #et_mobile_nav_menu {
 display: block;
 }

#top-menu {
 display: none;
 }
 }

Bu medya sorgusu iki şey yapar. Normal menüyü gizler ve mobil menüyü 1024 piksel kesme noktasında görüntüler.

4. Çözüm: Menü Stilini Belirli Bir Kesme Noktasında Ayarlama

Bu çözüm muhtemelen en iyi seçenektir çünkü belirli kesme noktalarında menünüz üzerinde en fazla kontrole sahip olmanızı sağlar. Medya sorgunuzda özel stiller oluşturmak için css sınıflarını kullanarak menü öğelerinizi hedefleyebilirsiniz.

Menü öğeleriniz için Divi'nin varsayılan CSS'si:

#top-menu li {
    display: inline-block;
    padding-right: 22px;
    font-size: 14px;
}

Diyelim ki menü yazı tipi boyutunuzun varsayılan olarak 18 piksel olmasını istiyorsunuz, ancak belirli bir kesme noktasında 14 piksel olarak değişmesini istiyorsunuz. Daha da fazla alan kazanmak için dolguyu 22 piksel yerine 15 piksele düşürebilirsiniz. Bunu, tüm menü öğeleri için css sınıfını hedefleyerek ve bir medya sorgusu oluşturarak yapabilirsiniz.

Tema Özelleştirici > Ek CSS'ye gidin ve aşağıdakileri girin:

@media (max-width: 1200px) {
 #top-menu li, #top-menu li a {
 font-size: 14px;
 padding-right: 15px;
 }
 }

Bu CSS'nin yaptığı, 1200 piksel veya altındaki herhangi bir ekranda yazı tipi boyutunu 14 piksele ve sağ dolguyu 15 piksele değiştirmektir. Bu, masaüstünde ekran boyutunu ayarlarken yumuşak bir geçiş sağlar ve büyük tabletlerde ve küçük dizüstü bilgisayarlarda varsayılan gezinmenizi korumanıza olanak tanır.

Diğer Başlık Stillerini Ayarlama

Divi'nin Tema Özelleştiricisi içinden seçebileceğiniz beş başlık stili vardır (dikey gezinme hariç). Beş stil, Varsayılan (bu gönderide zaten ele alınan) Kaydırmalı, Tam Ekran, Ortalanmış ve Ortalanmış Satır İçi Logo'yu içerir.

Kaydırın ve Tam Ekran Stilleri

Web sitesi tasarımınız ya içeri kaydırma ya da tam ekran stilleri gerektiriyorsa, tüm ekran boyutlarında menüyü tetiklemek için mobil gezinme hamburger simgesi kullanıldığından, duyarlı menünüz hemen hemen kusursuzdur.

Ortalanmış Stil

Ortalanmış stili kullanıyorsanız, menü öğelerinizin nefes alması için daha fazla alana sahip olursunuz, ancak yine de biraz daha alana ihtiyacınız varsa, istediğiniz şekilde görünmesini sağlamak için varsayılan stil için kullandığımız aynı özel çözümleri kullanabilirsiniz.

Ortalanmış Satır İçi Logo Stili

Son olarak, ortalanmış satır içi logo stili başlığını en baştan almak biraz zor. Logonun sayfada ortalanmasını istiyorsanız birkaç şeyi doğru yapmanız gerekiyor. İlk önce, ortadaki logonun merkez parça olarak kalması için çift sayıda menü öğesine ihtiyacınız var.

İkinci olarak, her menü öğesi için kullandığınız metin miktarı logonun merkez noktasını belirleyecektir. Bir tarafta daha fazla metin varsa, logo biraz kapalı olacaktır. Bu, çoğu durum için çok önemli değildir, ancak doğrudan logonun altında ortalanmış öğeler içeren bir başlığınız varsa, bu, düzeltmeniz gereken bariz bir sorun olabilir.

Menüdeki logonun, başlık bölümündeki ortalanmış logoya kıyasla nasıl biraz ortalanmış olduğuna dikkat edin.

Şimdi “Bilgi Öğeleri” menü öğesi etiketini “Bilgi” olarak kısaltacağım. Şimdi logonun nasıl daha fazla merkeze kaydığına bakın.

Bu çözüm, logoyu istediğiniz yere götürmek için ihtiyacınız olan tek şey olabilir. Bu küçük ayarlamaları yapmak için "Hakkımızda" gibi bir şeyi "Hakkında" veya tam tersi olarak değiştirmekten kurtulabilirsiniz.

Ancak, eğer mükemmeliyetçi iseniz bu biraz sinir bozucu olabilir (anlarım olabilir. İnanın bana.) Yani, daha fazla ayarlama yapmak istiyorsanız yapabileceğiniz daha derin bir kişiselleştirme seviyesi var. Logonun merkez noktasını ayarlamak için menü öğesindeki asıl metni ayarlamak yerine, herhangi bir öğeye özel bir css sınıfı ekleyebilir ve sağına veya soluna biraz dolgu verebilirsiniz. Bu size her şeyi merkeze almak için ihtiyacınız olan son dürtüyü verecektir.

WordPress kontrol panelinden Görünüm > Menüler'e gidin ve Ekran Seçenekleri alanında CSS Sınıflarının işaretli olduğundan emin olun.

Ardından, hedeflemek istediğiniz menü öğesini açın. Ardından, CSS Sınıfları giriş kutusuna bir CSS sınıfı girin. Ben benimkine "dürtmek" diyorum.

Bundan sonra Divi > Tema Özelleştirici > Ek CSS'ye gidin ve aşağıdaki özel CSS'yi ekleyin:

#top-menu li.nudge  {
padding-right: 32px;
}

Bu css ile yalnızca "dürtme" sınıfına sahip öğeye 32 piksellik bir sağ dolgu verilir; Bu, logoyu ortalayacak kadar iter.

Bu kadar!

Kapanış Düşünceleri

Divi, web siteleri oluşturmayı eğlenceli ve kolay hale getirir. Ancak bazen işin (ve müşterilerimizin) talepleri, sitelerimizin mükemmel olduğundan emin olmak için fazladan yol kat etmemizi gerektirir. Ve iyi siteleri harika sitelerden ayıran şey küçük ayrıntılardır. Duyarlı gezinme menünüzün çalışma şekli, doğru yapmak istediğiniz önemli ayrıntılardan biridir. Çoğu zaman, kullanıcılarınızın sitenizin her sayfasında göreceği ve etkileşim kuracağı ilk şeydir. Bozuk görünümlü bir menü, kötü bir ilk izlenim bırakabilir. Umarım bu yazı sizi doğru yöne “dürtmenize” yardımcı olur (üzgünüm kendime yardım edemedim :)).

Eminim bu yazıda değinmediğim daha fazla sorun ve çözüm vardır. Onları yorumlarda yayınlamaktan çekinmeyin. Cevabınızı sabırsızlıkla bekliyorum.

Şerefe!