Cara pertama ini tentu lebih mudah bagi semua pengguna dan saya lebih menyarankan untuk menggunakan cara ini bagi pemula. Dan untuk memulainnya, hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin Menu Sticky (For Anything!).
Setelah aktivasi, silahkan masuk pada menu Settings » Sticky Menu (For Anything!) untuk melakukan konfigurasi plugin.
Pertama Anda harus memasukkan ID CSS menu navigasi yang ingin Anda buat sticky atau melayang.
Untuk mendapatkan ID CSS Anda, silahkan menggunakan tool di browser Anda ntuk menemukan ID CSS yang digunakan oleh menu navigasi Anda. Caranya, cukup kunjungi situs web Anda dan arahkan mouse Anda ke menu navigasi. Setelah itu, Anda perlu klik kanan dan pilih Inspect Element dari menu browser Anda.
Dengan melakukan hal tersebut maka browser akan membagi layar Anda, dan Anda akan dapat melihat source code untuk menu navigasi Anda. Dan temukan baris kode seperti ini.
1
<nav id="site-navigation" class="main-navigation" role="navigation">
Dalam contoh ini, ID CSS dari menu navigasi tema diatas adalah site-navigation.
Jika sudah ketemu seperti diatas, sekarang kembali ke pengaturan plugin Menu sticky floating dan masukkan ID CSS dari menu navigasi #site-navigation.
Pilihan berikutnya pada halaman pengaturan plugin adalah untuk mendefinisikan ruang antara bagian atas layar Anda dan menu navigasi sticky. Anda dapat menggunakan pengaturan ini jika menu Anda tumpang tindih dengan elemen yang Anda tidak ingin disembunyikan. Jika tidak, maka mengabaikan pengaturan ini.
Setelah itu Anda perlu untuk mengklik kotak centang di sebelah opsi: ‘Check for Admin Bar’. Hal ini memungkinkan plugin untuk menambahkan beberapa ruang untuk admin bar WordPress yang hanya ditambahkan untuk login pengguna.
Opsi berikutnya di halaman pengaturan memungkinkan Anda unstick menu navigasi jika pengguna mengunjungi situs web Anda menggunakan layar yang lebih kecil seperti perangkat mobile.
Anda dapat menguji bagaimana tampilannya pada perangkat mobile atau tablet. Jika Anda tidak menyukainya, maka Anda dapat mengisi kolom dengan 780px pada opsi ini.
Jangan lupa untuk mengklik tombol “Save” untuk menyimpan perubahan yang sudah Anda lakukan.
Sekarang Anda dapat mengunjungi situs web Anda untuk melihat navigasi menu sticky floating Anda apakah tampil dengan baik atau tidak.
Cara Membuat Menu Floating Sticky Manual Cara yang kedua ini mengharuskan Anda untuk menambahkan kode CSS kustom untuk tema Anda. Anda bisa menambahkan kode CSS ini pada file style.css di tema WordPress yang Anda gunakan atau lihat pada bagian Customizer.
Caranya silahkan masuk pada Appearance » Customizer untuk meluncurkan tema penyesuain.
Klik ‘Additional CSS’ di sebelah kiri dan kemudian tambahkan kode CSS ini.
1
2
3
4
5
6
7
8
9
10
11
12
13
#site-navigation {
background:#fff;
height:60px;
z-index:170;
margin:0 auto;
border-bottom:1px solid #dadada;
width:100%;
position:fixed;
top:0;
left:0;
right:0;
text-align: center;
}
Ganti #site-navigation dengan ID CSS menu navigasi Anda dan klik tombol Save & Publish.
Sekarang Anda dapat mengunjungi situs web Anda untuk melihat menu navigasi Anda menjadi floating dan melayang diatas mengikuti halaman discroll kebawah.
Jika menu navigasi Anda biasanya muncul setelah header situs, maka kode CSS ini bisa tumpang tindih judul situs dan sundulan.
Hal ini dapat dengan mudah disesuaikan dengan menambahkan marjin ke daerah header menggunakan beberapa CSS seperti ini:
1
2
3
.site-branding {
margin-top:60px;
}
Ganti class css .sites-branding dengan class CSS pada daerah header CSS tema Anda.
Dan yang Paling termudah
1
2
3
4
6
}
section.elementor-section.elementor-top-section.elementor-element.elementor-element-2e8b974.elementor-section-boxed.elementor-section-height-default.elementor-section-height-default > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element > .elementor-widget-container > h6 {
background: #f45a2a;
margin: -50px -50px 10px -50px!important;
padding: 20px;
font-size: 1.1rem;
font-weight: 800;
color: #fff!important;
text-align: center;
border-top-left-radius: 18px!important;
border-top-right-radius: 18px!important;
}
.ast-desktop .ast-primary-header-bar .main-header-menu > .menu-item {
line-height: 45px!important;
}
.current-menu-item {
border-bottom: 2px solid #f45a2a;
color: #ffffff!important;
}
.widget-title {
color: var(--ast-global-color-2);
font-size: 1.1111111111111rem!important;
}
.elementor-302 .elementor-element.elementor-element-de406ff .elementor-heading-title {
text-transform: uppercase;
}
Ganti class css .sites-branding dengan class CSS pada daerah header CSS tema Anda.
FILE CSS sticky
Post a Comment