Sayfanın headerını nasıl sabit bırakabilirim ? (prototurk'deki gibi)

deadmonster 1031 gün önce

2,806 defa görüntülendi ve 1 kişi tarafından değerlendirildi

Admin panelimin menüsünü sabitlemek istiyorum . (Görseldeki sol menüyü ) Bunu css ile nasıl yapabilirim. (bootstrap kullanıyorum)

İstediğim şey tam olarak bu. İçerik ne kadar uzarsa uzasın left-menu hep sabit kalacak.

NOT : css bilgim çok az ama position:fixed verdim sayfa yapısı bozuldu :(

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (13)

ilyasbilgihan

1030 gün önce

Yorum olarak belirttiklerimin dışındaki değerleri, ilgili classın kodlarına ekstra olarak ekle. Belirtmiş olduklarımda da değişiklikleri uygula. Ve sakın !important uygulama, tasarımın responsive olduğu için mobile boyutlarına aldığında bozulmalar meydana gelebilir.

Not 1: Header'ı da sabit bırakmak istersin diye düşündüm, istemiyorsan header ile ilgili kısmı ekleme.
Not 2: Bu kodları eklemeden önce oluşmayan bir problem, bu kodları ekledikten sonra herhangi bir yerde görülebilir, etkilerini detaylı incelemek lazım o kısmını sana bırakıyorum.

body {
    display: flex; /* display: table; yerine flex uygula */
}
#left-panel { 
    flex: none;
    position: sticky;
    top: 0;
}
#header {
    position: sticky;
    top: 0;
    z-index: 99;
}
body.open .right-panel {
    margin-left: 0; /*  margin-left: -210px; yerine 0 uygula ya da bu satırı sil */
}
body.open .left-panel {
    max-width: inherit; /*  max-width: 70px; yerine inherit uygula ya da bu satırı sil, menü animasyonuna engel oluyor. */
}

#006306

deadmonster

1030 gün önce

@ilyasbilgihan - Yazdığın kodlar çok güzel çalışıyor, teşekkür ederim. Ama mobil boyutlardan baktığım zaman soldaki menü üst tarafa geçiyordu ve aç-kapa mantığı vardı. Ama `body{display:flex;}` verince mobilde tasarım bozuluyor. Bunu nasıl önleyebilirim?

DÜZELTME :
Çağırdığım css dosyanının linki daha aşağıdaymış. O yüzden karışıklık olmuş. Sorun çözüldü, teşekkür ederim.

#006311

sefa

1031 gün önce

aside için:

width: 15%;
top: 0;
left: 0;
position: fixed;

id'si right-panel olan için:

position: absolute;
width: 85%;
right: 0;
top: 0;

Menünün kapanıp açılması sırasında oluşacak sorun için de şunu yaz:

.open .right-panel {
    width: 95%;
}
.open aside.left-panel {
    max-width: 5%;
    width: 5%;
}

Eğer boyutları eziyorsa !important kullan.

#006300

deadmonster

1031 gün önce

@sefa - container yok. direkt bodynin içinde ama dediğin gibi body'e relative ve içindeki menuye sticky verdim ama yapamadım. Temanın linki : https://colorlib.com/polygon/sufee/index.html

Düzeltme : sonradan fark ettim menü div değil aside etiketiymiş. bunla alakalı olabilir mi?

#006298

sefa

1031 gün önce

container'in içinde menü ve diğer orta alanın olduğunu varsayıyorum. Container'in içindekilere sticky vermeyi dene. Container'a da relative ver.
Ek olarak tema hazır gibi duruyor, linki varsa atar mısın, bir deneyeyim.

#006297

deadmonster

1031 gün önce

@sefa - sticky verince de menü sabit kalmıyor.

#006296

sefa

1031 gün önce

position: sticky

olarak dener misin?

#006295

deadmonster

1031 gün önce

sefa
z-indexe bağlı olarak altına veya üstüne geçiyor

#006294

sefa

1031 gün önce

Altında kalıyor derken? SS alıp link atar mısın?

#006293

deadmonster

1031 gün önce

@sefa fixed veriyorum ama sayfa içeriği menü'nün altına kayıyor.

@makifgokce owerflowlar bi işe yaramadı. Menü yine kayıyor

#006292

makifgokce

1031 gün önce

.sidebar{
    overflow-x: hidden;
    overflow-y: auto;
}

dikey scroll'un gerektiğinde açılması için değerini auto yaparsan içerisindeki elemanlar sığmadığında scroll görünmeye başlar.

#006291

sefa

1031 gün önce

    .menu {
        position: fixed;
        top: 0;
        left: 0;
    }

#006290

egemennk1

1031 gün önce

Sabit tutmak istediğin alanı farklı bir dosyaya kaydet sonrada include et

#006289