Skip to content

(Artikel) Internet Marketing

Kumpulan Artikel Promo, Online, Internet advertising & Internet Marketing

  • Home
  • Buku Tamu
  • About
  • Privacy Policy
  • Disclaimer
  • Download
  • Toggle search form
Cara Membuat Header Sticky dengan plugin dan CSS

Cara Menambahkan Sticky Header WordPress

Posted on July 1, 2022April 24, 2025 By Imam Suharjo

Cara menambahkan Sticky Header WordPress, menu yang selalu berada di atas meskipun discrol ke atas dan bawah. Sticky Header akan mempermudah navigasi ke post atai page yang lain. Navigasi yang sticky dapat menjadi tambahan yang bagus untuk situs web Anda. Ini menciptakan UX yang lebih baik untuk pengunjung Anda dan membantu mereka dengan cepat menemukan informasi lain di situs Anda. Banyak tema sekarang menyertakan fitur menu sticky, tidak semua melakukannya. Ini terutama berlaku untuk tema gratis. Untungnya, ada beberapa plugin yang dapat menambahkan fungsionalitas menu tetap dalam beberapa klik. Atau Anda dapat mencapai hal yang sama dengan CSS murni.

Setidaknya ada 3 cara mudah menambahkan Sticky Header di WordPress anda, berikut ini rangkuman caranya.

Menggunakan Theme yang Support

Ini adalaha cara yang termudah bagi pemula. Menggunakan Theme yang memang sudah support Sticky Header seperti : Astra, Generate Press atau yang lain bisa di expore sendiri. Dengan tema ini tinggal merubah dari menu Theme bagiaan menu apa yang akan dibuat selalu diatas (Sticky). Cara menambahkan Sticky Header ini mudah, namun layout theme kita ikuti teme bawaan, mungkin ini yang kurang pas jika kita inginkan tampilan yang beda dengan keingginan kita, perlu modif temenya.

Baca Juga : Hanya 5rb/bulan – WordPress Hosting Termurah!

Menggunakan Plugin WordPress

Cara kedua menggunakan plugin Sticky Header, tinggal pasanbg plugin pilih bagian mana yang akan di sticky dan simpan. Ada banyak plugin yang bisa dicoba antara lain :

Cara menambahkan Sticky Header WordPress
  1. Sticky Header Effects for Elementor. Options and features that extend Elementor Pro’s sticky header capabilities. By Rwattner
  2. Sticky Menu & Sticky Header, Sticky Menu or Sticky Header sticks elements at the top of the screen when you scroll, or create a floating sticky menu or fixed widget. By WebFactory Ltd
  3. Floating Notification Bar, Sticky Menu on Scroll, and Sticky Header for Any Theme – myStickymenu. Create a beautiful welcome notification bar. This sticky menu plugin will also make your menu or header stick to the top of page, when scrolled down. By Premio
  4. Oceanwp sticky header, Easy Sticky header installation By Oren Hahiashvili
Menu pada plugin MyStyckyMenu

Saya mencoba beberapa plugin ini, namun yang paling mudah menerut saya adalah Floating Notification Bar, Sticky Menu on Scroll, and Sticky Header for Any Theme – myStickymenu. Tinggal install dan plih menu yang mau di Sticky saja. Bebeapa plugin lain perlu cari kode CSS pada headernya, meskipun mudah namun bagi pemula mungkin tidak bisa instan.

Baca juga : Mengapa WordPress (cms) Sangat luar Biasa?

Menggunakan Kode CSS

Seperti yang kita ketahui bahwa CSS adalah kode gaya yang digunakan untuk mempercantik atau membuat halaman web menjadi lebih menarik, begitu juga dengan sticky header ini. Jika anda sedang mempelajari css maka ini adalah halaman yang tepat karena akan membahas tutorial cara membuat sticky header dengan css yaitu header menu menjadi gaya tetap atau tidak bergerak saat halaman di scroll.

Cara ketiga ini tidak diromendasikan buat pemula, tapi jika anda sedikit tahu kode html adan CSS silahkan jika mau dicoba. Konten sticky adalah konten yang akan tetap diposisikan setelah pengguna menggulir melewatinya (yaitu: terjebak di posisinya). Tidak seperti position: fixed;, konten sticky dibatasi oleh wadahnya dan akan berhenti menggulir setelah akhir elemen induk tercapai. Untuk membuat elemen lengket, Anda perlu menambahkan CSS berikut:

position: sticky; top: 0;

Video Cara menambahkan Sticky Header WordPress

Dari kanal Youtube Build That Website, menunjukkan cara mudah menambahkan header sticky, menu lengket, atau navigasi sticky ke tema WordPress APAPUN. Ada 3 metode, dan semuanya bekerja dengan baik.

Video ini menunjukkan cara memperbaiki gangguan seperti bilah admin yang tumpang tindih dengan header Anda, atau tautan jangkar yang disembunyikan saat Anda menggulirnya.

Post Views: 5,115
Artikel, Wordpress Tags:CSS, plugin, Sticky Header, Theme, UX

Post navigation

Previous Post: Pakai Sepatu itu Penting, Ini Alasan memilih Sepatu
Next Post: Kampus Swasta dengan Jurusan Manajemen di Jogja

Related Posts

Free Webinar Peran Orang Tua dan Guru - MAFINDO Malang Free Webinar Peran Orang Tua dan Guru – MAFINDO Malang Artikel
Juara dalam olahraga Semifinal Memahami Arti dan Perbedaan Grand Final, Final, dan Semifinal Artikel
Drumband AAU 2022 Mulai dari halaman Kantor DPRD Malioboro menuju ke Titik Nol. Video Drumband AAU di Malioboro 2022 – HUT TNI ke-77 Artikel
Jenis Antena Mobile Radio Komunikasi (Rig), Frekuensi, Gain dan Harganya Sebuah Tulisan yang menarik tentang Ham Radio di ZDNet Artikel
Peserta Kaget karena, Aksi lemparan HP saat Lomba Tonti di UMBY Artikel
surat izin tidak masuk sekolah sakit Surat Izin Tidak Masuk Sekolah: Pentingnya Komunikasi Antara Orang Tua, Siswa, dan Sekolah Artikel

Cari-cari disini

Hosting terbaik Hosting termurah

Popular Post

Posting Terbaru

  • Perbandingan Huawei Watch Fit 4 vs Watch Fit 4 Pro: Mana yang Cocok untuk Anda?
  • Apa Itu TOR Browser? Mengenal Teknologi di Balik Privasi Online
  • Sarung Mobil 4 layer Extreme Full Outdoor Berkualitas
  • Kuliah Fleksibel untuk Karyawan di Jogja: Solusi Naik Karir Tanpa Mengganggu Pekerjaan
  • Cara Cek Plagiarisme: Panduan Lengkap untuk Cek Plagiasi dan Plagiat Secara Mudah

Stats





DMCA.com Protection Status

Copyright © 2025 (Artikel) Internet Marketing.

Powered by PressBook Masonry Blogs