[ASK] CSS / HTML Header & Sidebar Posisi "Fixed"

Gan mau nanya, cara biar masukin element body di dalam header & sidebar yang posisinya "fixed" gimana ya?

ini inspect element dari web ane (masih localhost) .

ini inspect element dari web referensi. nah ane maunya kaya gitu gan, jadi isi konten (body) tepat di dalam header & sidebar nya, jadi biar wrap gitu

Ini CSS nya

/* SIDEBAR POSISI FIX */
.layout-sidebar .sidebar-area .block-grid--gutters {
  height:100% !important;
  position: fixed !important;
  border-left: 1px solid !important;
  padding-top: 100px !important;
  padding-left: 50px !important;
  padding-right: 50px !important;
  padding-bottom: 100px !important;
  overflow-y: scroll !important;
  right: 0 !important;
  width: 350px !important;
 }

/* POSISI FIX PLAYER */
.hammer-player {
    max-width: 100%;
    position: fixed;
}

/* POSISI FIX HEADER */
.site-header {
margin-left: 0px;
margin-right: 0px;
max-width: 100%;
position: fixed;
}

untuk web referensi ane bisa liat di <a href='nesthq.com'>nesthq.com</a> di tunggu solusinya :D

avatar dwivyandre
@dwivyandre

1 Kontribusi 0 Poin

Diperbarui 6 tahun yang lalu

1 Jawaban:

Btw, bukan "body" yang di masukin ke element header ato sidebar. Tapi, agan kudu buat element lagi buat jadi container untuk fixnya.

Jadi, akan ada 3 block: 1. Block header. 2. Block Sidebar 3. Block container.

Nah, caranya biarin header dan sidebar nya fix. Block container mainin paddingnya, jangan pake margin karena banyak pengaruh di positioning nantinya.

Ini ane buat contoh: https://jsfiddle.net/eo55bosq/

NB: - Headernya kasih height fixed. - Sidebarnya kasih width fixed.

Semoga membantu.

avatar nurimansyah
@nurimansyah

98 Kontribusi 87 Poin

Dipost 6 tahun yang lalu

Login untuk ikut Jawaban