Mega menü eklentisi entegre sorunu

Mega menü tam genişlikte olması için ne yapmam gereklidir?
https://prnt.sc/on2y0x
https://prnt.sc/on2xi3

Bu sorunu anlamak için CSS position olaylarını anlaman gerekiyor. Bunun için aşağıdaki makaleden faydalanabilirsin.

CSS ile konumlandırma(positioning)

Sorunu kısaca anlatmak gerekirse mega menü'ye position: absolute; özelliği tanımlanmış. Bu özellik sayesinde mega menü, sayfanın olduğu katmanın bir önüne çıkarak sayfa içeriğinden bağımsız bir alan olmuş ve bir üstteki relative kapsayıcıya göre dikey ve yatayda konumlanmış.

Sorunu çözmek için aşağıdaki koddan faydalanabilirsin.

/* grid'in dışındaki .row sınıfına kapsayıcılık özelliği verelim.  */
.main-menu-area .container .row { position: relative; }

/* grid içinde kalmış site-navigation alanının kapsayıcılık özelliğini kaldıralım. */
#site-navigation { position: static; }

 

Kodları özelleştiriciye ekledim fakat faydası olmadı.

Dediğim gibi bu sorun position'dan kaynaklanıyor. Mega menünün kendisine position: absolute; verilerek bir katman öne getirilmiş. Mega menü de en yakın relative olan kapsayıcıya göre konumlanıyor. Mega menü'nün kapsayıcılarını teker teker inceleyerek position: relative; verilmiş olan div'i bulman gerekiyor. Bunun içinde Öğeyi Denetle panelinden biraz deneme yanılma yapmalısın.

Ayrıca yukarıda yazdığım koda !important verirsen belki sorun düzelebilir.

Evet.. position: absolute; yapınca oldu fakat, row 2 bölüm, solda buton alanı var (col-lg-3). Bundan dolayı menü dışa kaydı. Buton alanını kaldırmam gerekiyor. header-1.php dosyasında kodlar denedim fakat kaldıramadım php bilmiyorum.

https://prnt.sc/ot8h1y
https://prnt.sc/ot8hue

Cevap Yaz

Cevap yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git