lostyazilim
tr.link

WP Sticky Sidebar

3 Mesajlar 697 Okunma
lstbozum
tr.link

Sailort Sailort WM Aracı Kullanıcı
  • Üyelik 10.03.2018
  • Yaş/Cinsiyet 50 / E
  • Meslek Bilişim
  • Konum İstanbul Anadolu
  • Ad Soyad A** T**
  • Mesajlar 211
  • Beğeniler 117 / 25
  • Ticaret 1, (%100)
Sitemde kullanmak istiyorum ama en stabil çalışan tavsiyeniz hangisi?
 

 

wmaraci
reklam

aveli aveli Designer & Coder Kullanıcı
  • Üyelik 12.07.2019
  • Yaş/Cinsiyet 54 / E
  • Meslek Designer & Coder
  • Konum Almanya
  • Ad Soyad O** E**
  • Mesajlar 12
  • Beğeniler 1 / 5
  • Ticaret 0, (%0)
Merhaba Bunu kendinizde yapa bilirsiniz biraz kod bilginiz varsa örnek






Basic Sticky Sidebar with Bootstrap 4









Content Section















.content-section {
min-height: 2000px;
}
.sidebar-section {
position: absolute;
height: 100%;
width: 100%;
}


.sidebar-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

/* Position the items */
// &:nth-child(2) { top: 25%; }
// &:nth-child(3) { top: 50%; }
// &:nth-child(4) { top: 75%; }
}


.make-me-sticky {
position: -webkit-sticky;
position: sticky;
top: 0;

padding: 0 15px;
}



/* Ignore This, just coloring */
body {
background: #fff;
}

article {
background: #f1f1f1;
border-radius: 12px;
padding: 25px 0 600px;
}


.title-section, .content-section, .sidebar-section {
background: #fff;
// border-radius: 12px;
// border: solid 10px #f1f1f1;
}

.title-section {
text-align: center;
padding: 50px 15px;
margin-bottom: 30px;
}

.content-section h2 {
text-align: center;
margin: 0;
padding-top: 200px;
}

.sidebar-item {
text-align: center;

h3 {
background: gold;
max-width: 100%;
margin: 0 auto;
padding: 50px 0 100px;
border-bottom: solid 1px #fff;
}
}


DEMO
Sailort

kişi bu mesajı beğendi.

Sailort Sailort WM Aracı Kullanıcı
  • Üyelik 10.03.2018
  • Yaş/Cinsiyet 50 / E
  • Meslek Bilişim
  • Konum İstanbul Anadolu
  • Ad Soyad A** T**
  • Mesajlar 211
  • Beğeniler 117 / 25
  • Ticaret 1, (%100)

aveli adlı üyeden alıntı

Merhaba Bunu kendinizde yapa bilirsiniz biraz kod bilginiz varsa örnek






Basic Sticky Sidebar with Bootstrap 4









Content Section















.content-section {
min-height: 2000px;
}
.sidebar-section {
position: absolute;
height: 100%;
width: 100%;
}


.sidebar-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

/* Position the items */
// &:nth-child(2) { top: 25%; }
// &:nth-child(3) { top: 50%; }
// &:nth-child(4) { top: 75%; }
}


.make-me-sticky {
position: -webkit-sticky;
position: sticky;
top: 0;

padding: 0 15px;
}



/* Ignore This, just coloring */
body {
background: #fff;
}

article {
background: #f1f1f1;
border-radius: 12px;
padding: 25px 0 600px;
}


.title-section, .content-section, .sidebar-section {
background: #fff;
// border-radius: 12px;
// border: solid 10px #f1f1f1;
}

.title-section {
text-align: center;
padding: 50px 15px;
margin-bottom: 30px;
}

.content-section h2 {
text-align: center;
margin: 0;
padding-top: 200px;
}

.sidebar-item {
text-align: center;

h3 {
background: gold;
max-width: 100%;
margin: 0 auto;
padding: 50px 0 100px;
border-bottom: solid 1px #fff;
}
}


DEMO



Açıkçası o kadar bilgim maalesef yok. Bir kısım css eklemeleri yapıp çözümler sağlıyorum ama o kadar.

Bu html olan kısmı elementor de sağ kolonda sidebar tanımladığım yere özel html ekleyip mi çözüm sağlıyorum.
 

 

wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al