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

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

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Belajar membuat header melayang - Pemula Belajar</title>
 <link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<div class="navigasi">
 <nav>
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Drop 1</a>
 <ul>
 <li><a href="#">Menu list 1</a></li>
 <li><a href="#">Menu list 2</a></li>
 </ul>
 </li>
 </ul>
 </nav>
</div>
<div class="container">
 Membuat header melayang atau header fixed itu sangat mudah :)
 Gulir kebawah
 
 
 
 
 
 
 
 Header melayang! Mentok dibawah!
</div>
</body>
</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

body{
    margin: 0 auto;
}
.navigasi {
    background-color: #2980b9;
    position: fixed;
    width: 100%;
    height: 70px;
    top: 0;
}
.container {
    margin-top: 70px;
    padding: 15px;
}
nav a {
    color: #fff;
    font-size: 24px;
    text-decoration: none;
}
nav a:hover {
    text-decoration: none;
}
nav ul {
    list-style: none;
}
nav ul li {
    float: left;
    padding: 5px 20px;
}
nav ul li:hover {
    background-color: #FFF;
    border-radius: 5px;
}
nav ul li ul {
    display: none;
    list-style: none;
    margin-left: -20px;
}
nav ul li ul li {
    float: none;
    padding: 5px 20px;
    margin-left: -40px;
}
nav ul li ul li:hover {
    background-color: #DDD;
    border-radius: 0px;
}
nav ul li:hover > ul {
    display: block;
    position: absolute;
    background: #F1F1F1;
}
nav ul li:hover > ul a {
    color: #2980b9;
}
nav ul li:hover > a {
    color: #2980b9;
}

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.

Posisi belum scroll

Posisi sudah scroll

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 :)