Create A Responsive Header
/* Style the header with a grey background and some padding */.header { overflow: hidden; background-color: #f1f1f1; padding: 20px 10px;}/* Style the header links */.header a { float: left; color: black; text-align: center; padding: 12px; text-decoration: none; font-size: 18px; line-height: 25px; border-radius: 4px;}/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */ .header a.logo { font-size: 25px; font-weight: bold;}/* Change the background color on mouse-over */.header a:hover { background-color: #ddd; color: black;}/* Style the active/current link*/.header a.active { background-color: dodgerblue; color: white;}/* Float the link section to the right */.header-right { float: right;}/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */ @media screen and (max-width: 500px) { .header a { float: none; display: block; text-align: left; } .header-right { float: none; }}
Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.
Track your progress - it's free!
How TO - Responsive Header
Learn how to create a responsive header with CSS.
Change the design of the header depending on the screen size. Resize the browser window to see the effect.
SELAMAT DATANG SELAMAT BERMAIN
Teknik CSS Fix Header / Header yang diam di tempat adalah salah satu teknik CSS yang cukup asik dan mudah untuk dipelajari lho. Teknik ini diterapkan di banyak website yang cukup terkenal seperti Facebook, dan website saya sendiri.. Wkwkw
Langsung ke tutorialnya aja ya, kali ini saya akan membagikan langkah-langkah + demo supaya kita bisa memahami konsep cara kerjanya.. Pertama-tama kita buat struktur HTMLnya dulu, misalkan website kita terdiri dari header, content, dan footer seperti berikut ini
Sampai di struktur dasar ini, tampilannya kira-kira seperti ini :
Terlihat baik-baik saja ya? Memang, tapi bagaimana kalau bagian kontennya kita isi lebih banyak lagi dari yang sekarang? Yang terjadi adalah, ketika browser discroll maka header akan menghilang karena tertutup viewport.
Header yang tersembunyi dari viewport biasanya akan cukup menyulitkan dari sisi navigasi. Misalnya ketika pengguna website sudah scroll sampai kebawah dan ingin mengakses header, artinya user harus scroll ke atas lagi dong. Nah, untuk mengatasi itulah teknik Fix Header digunakan.
Cara pengaplikasiannya adalah dengan menggunakan position:fixed pada container header yang ingin dibuat diam. Position Fixed harus disertai lebar (width) dan tinggi (height) yang jelas agar dapat tampil dengan baik. Selain itu juga perlu ditambahkan perintah z-index untuk mengatur posisi header agar selalu muncul tanpa tertutup elemen apapun. Ah, dan jangan lupa juga padding-top untuk div content, agar tidak ada bagian konten yang tersembuyi karena tertutup header.
Setelah melakukan perubahan-perubahan tersebut, jadi deh layout fix headernya.. Kalau kita scroll websitenya sampai kebawah, maka header masih diam diatas seperti ini..
Demikian tutorial Fix Header dengan CSS.. Semoga bisa dipraktekkan ya.. File demo tutorial ini bisa didownload cuma-cuma disini. Selamat mencoba~
Header V10 is a pre-configured header layout of Konte. In order to select it, just go to Customize > Header > Header Layout and select Prebuilt Header as Header V10. With all header layouts, you can select header background, text color, set the height in the Customizer. Besides, the Topbar can be configured separately.
