Skip to main content

Memberi Sorotan Background Khusus Pada Menu Navigasi Header

Rabu, 07 April 2021

Memberi Sorotan Background Khusus Pada Menu Navigasi - Sebenarnya saya bingung mau kasih judul yang pas untuk postingan kali ini. Namun kalian coba pahami saja dengan melihat gambar dibawah ini (klik untuk perbesar).

Memberi Sorotan Background Khusus Pada Menu Navigasi

Pada demo tersebut saya membuat sorotan khusus pada menu HOME dan kamu bisa ubah warna sesuai selera. Untuk menerapkan trik tersebut tidaklah sulit hal yang pertama yang perlu kamu lakukan ialah mengetahui kode CSS pada menu yang anda gunakan.

Sebagai contoh kode menu css yang saya gunakan pada demo tersebut kurang lebih seperti ini:

.topnav{overflow:hidden;display:block;height:50px;float:right;margin-right:50px}
.topnav a{float:left;display:block;text-align:center;text-decoration:none}

Untuk pemanggilnya HTML nya seperti ini:

<div class='topnav' id='myTopnav'><a href='/' title='Home'>Home</a>
</div>

Untuk membuat sorotan background khusus kita hanya perlu menambahkan kode css menu blog kita menjadi seperti ini:

.topnav .sorot{background:#f2f2f2;padding-top:0px;color:#444444;font-weight:500}

Lalu menambahkan CLASS pada menu HTML nya sehingga menjadi seperti ini

<div class='topnav' id='myTopnav'>
<a class='sorot' href='/' title='Home'>Home</a>
</div>

Simpan Template.

Catatan: Untuk kamu pengguna template kompi flexible bisa langsung menerapkannya tanpa penyesuaian lagi sebab saya gunakan template tersebut pada demo.

Baca juga: Cara Merubah Warna Menu Header Template Kompi Flexible

Namun buat kamu yang memakai template berbeda tinggal penyesuain saja sebab kurang lebih caranya sama hanya berbeda kode CSS MENU nya saja.

Selamat mencoba!

Bagikan:

Hallo sobat! blog.jejakunik.com membuka kesempatan untuk anda mempromosikan Produk atau Jasa secara GRATIS pada blog ini. Detailnya bisa kamu lihat di CLICK HERE
Buka Komentar
Tutup Komentar