CARA MEMBUAT DAN MENGHIAS NAVBAR DENGAN LOGO CSS

Sebuah navbar atau navigasi bar adalah elemen penting dari sebuah website. Ini adalah area pertama yang dilihat oleh pengunjung dan memungkinkan mereka untuk bergerak dengan mudah antara halaman dan konten yang berbeda. Dengan CSS, kamu dapat membuat, menghias, dan bahkan mempersonalisasi navbar dengan logo. Di artikel ini, kita akan membahas cara membuat dan menghias navbar dengan logo menggunakan CSS.

Membuat Navbar

Pertama-tama, kita akan membuat navbar dasar dengan HTML. Gunakan elemen HTML seperti <nav> dan <ul> untuk membuat struktur dasarnya.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Tentang</a></li>
    <li><a href="#">Kontak</a></li>
  </ul>
</nav>

Menambah Logo

Setelah membuat navbar dasar, kita dapat menambahkan logo. Ini bisa berupa gambar atau teks, tergantung pada kebutuhan dan preferensi kamu.

Untuk menambahkan gambar sebagai logo, gunakan elemen <img> dan letakkan di dalam <nav>, sebelum <ul>.

<nav>
  <img src="logo.png" alt="Logo">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Tentang</a></li>
    <li><a href="#">Kontak</a></li>
  </ul>
</nav>

Mengatur Navbar dengan CSS

Setelah menambahkan logo, kita akan mengatur navbar dengan CSS. Disini, kita akan mengubah warna latar, warna teks, dan lain-lain.

nav {
  background-color: #f8f9fa;
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}

nav ul li {
  margin-right: 20px;
}

nav ul li a {
  color: #333;
  text-decoration: none;
}

Menghias Logo dengan CSS

Terakhir, kita akan menghias logo dengan CSS. Dengan CSS, kamu dapat mengubah ukuran, posisi, dan banyak lagi.

nav img {
  height: 50px;
  margin-right: 15px;
}

Dan itulah cara membuat dan menghias navbar dengan logo menggunakan CSS! Kamu sekarang dapat menyesuaikan navbar anda sesuai preferensi masing-masing. Selamat mencoba.