Tutorial CSS – Cara Membuat Header Fixed ( Melayang )

Header merupakan bagian pertama yang dilihat oleh pengunjung, maka bagian inilah yang harusnya dibuat menjadi menarik agar situs web kita disukai oleh pengunjung. Dari maka itulah web design membuat header fixed, selain membuat pengunjung menyukainya, juga dapat memudahkan pengunjung dalam menggunakan navigasinya.

Maksud dari header fixed ini adalah ketika kita scroll halaman website sampai halaman bawah (footer), header akan tetap diam ditempatnya sehingga dapat membantu user dalam mengklik navigasi website kita. Contoh : facebook.com

Daripada kawan masih bingung bagaimana cara membuat header melayang, ada baiknya kita mencoba membuat header melayang dengan cara langsung praktek.

Baca Juga :
Membuat style css website sendiri
Memisah css dengan content website

Untuk cara membuat header melayang kita akan menggunakan position: fixed; pada tag css. Tag css position: fixed; ini akan membuat class header akan berada tetap pada posisi awalnya. Untuk lebih jelas tentang membuat header melayang kawan bisa melihat beberapa point dibawah in.

  • Coding HTML header melayang
  • Membuat header melayang dengan css
Tutorial CSS – Cara Membuat Header Fixed ( Melayang )

Tutorial CSS – Cara Membuat Header Fixed ( Melayang )

Coding HTML Header Melayang

Membuat header fixed kita membutuhkan halaman web yang akan dijadikan contohnya. Agar coding ini berjalan kawan membutuhkan file dengan nama index.html. Sekarang kita coba berekspiremen dengan contoh coding html header melayang dibawah ini.

index.html

Simpan kode diatas dengan nama index.html, pada coding html diatas masih belum menampakan hasil yang sempurna. Dari maka itulah kita tambahkan coding css sebagai style untuk membuat header menjadi fixed (melayang).

Membuat Header Melayang Dengan CSS

Pada langkah inilah sebenarnya inti dari tutorial membuat header fixed ini. Setelah membuat coding pada index.html, sekarang kita coba membuat design website dengan menggunakan tutorial css ini. Sekarang kawan coba salin coding dibawah ini dan simpan dengan nama styles.css.

styles.css

Simpan dan jalankan file dengan nama index.html tadi. Selanjutnya kawan dapat men-scroll kebawah halaman tersebut untuk memastikan apakah header akan tetap diam alias melayang. Apabila header sudah melayang ketika kawan coba scroll halaman kebawah, sudah dipastikan coding berjalan normal. Untuk Screenshoot cara membuat header fixed, bisa dilihat pada gambar dibawah ini.

Header melayang css

Header melayang css – Posisi belum scroll

Cara membuat header melayang fixed diam

Cara membuat header melayang fixed diam

Sekian artikel tentang tutorial css tentang Cara Membuat Header Melayang ( fixed ). Semoga bisa bermanfaat bagi kawan, dan jika kawan tidak keberatan silahkan bagikan artikel ini dengan klik tombol bagikan di bawah. Salam dan terima kasih 🙂

Recent Tags:

Tutorial CSS – Cara Membuat Header Fixed ( Melayang ) | Andi Mariadi | 4.5

Leave a Reply