Cara Membuat Logo di Navbar Bootstrap – Hello Sobat Grafisnesia, jika kamu sedang membuat website atau aplikasi web, kamu pasti sudah familiar dengan Bootstrap.
Bootstrap adalah salah satu framework CSS yang paling populer dan digunakan secara luas.
Salah satu komponen Bootstrap yang paling penting adalah navbar.
Navbar memungkinkan pengguna untuk dengan mudah menavigasi ke berbagai bagian dari situs web atau aplikasi web. Namun, terkadang kita ingin menambahkan logo di navbar untuk memberikan tampilan yang lebih profesional. Nah, kali ini kita akan membahas cara membuat logo di navbar Bootstrap.
Langkah 1: Persiapkan Logo
Langkah pertama adalah menyiapkan logo yang akan ditampilkan di navbar.
Pastikan logo tersebut sudah dalam format yang sesuai seperti PNG atau SVG.
Ukuran logo juga harus disesuaikan dengan ukuran navbar Bootstrap.
Ukuran navbar Bootstrap bervariasi tergantung pada jenis dan versi Bootstrap yang kamu gunakan.
Untuk Bootstrap 4, ukuran navbar biasanya adalah 56 piksel.
Langkah 2: Tambahkan Logo ke Folder Proyek
Setelah kamu memiliki logo yang sesuai, langkah selanjutnya adalah menambahkan logo ke folder proyek.
Pastikan kamu menyimpan logo di direktori yang tepat dan mudah diakses.
Sebaiknya kamu menyimpan logo di folder “img” atau “images” dalam proyek Bootstrap.
Langkah 3: Tambahkan Kode HTML untuk Navbar
Langkah selanjutnya adalah menambahkan kode HTML untuk navbar.
Kamu dapat menambahkan kode HTML untuk navbar di file HTML atau template yang digunakan untuk halaman web. Berikut adalah kode HTML untuk navbar Bootstrap sederhana:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
Kode HTML tersebut mencakup navbar Bootstrap sederhana dengan menu navigasi dan tombol hamburger untuk menu di perangkat seluler.
Untuk menambahkan logo di navbar, kamu dapat menambahkan kode HTML untuk logo diantara tag “a” dan tag “button” seperti ini:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="img/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
Brand
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
Dalam kode tersebut, kami menambahkan tag “img” di dalam tag “a” dan memberikan sumber gambar (src) dan ukuran gambar (width dan height). Kami juga menambahkan kelas “d-inline-block align-top” untuk menyesuaikan letak gambar.
Setelah menambahkan kode HTML tersebut, kamu sudah berhasil menambahkan logo di navbar Bootstrap.
Langkah 4: Atur Tampilan Logo dengan CSS
Setelah menambahkan kode HTML untuk logo, langkah terakhir adalah mengatur tampilan logo dengan CSS.
Kamu dapat mengatur ukuran, posisi, dan warna logo untuk menyesuaikan dengan desain situs web atau aplikasi web. Berikut adalah contoh kode CSS untuk mengatur ukuran logo di navbar:
.navbar-brand img {
width: 50px;
height: auto;
}
Dalam kode tersebut, kami mengatur lebar gambar logo menjadi 50 piksel dan mengatur ketinggian gambar secara otomatis agar proporsional dengan lebar gambar.
Kamu dapat mengubah nilai lebar sesuai dengan ukuran logo yang kamu gunakan.
Kesimpulan
Dalam artikel ini, kita telah membahas cara membuat logo di navbar Bootstrap.
Langkah-langkahnya cukup sederhana, yaitu persiapkan logo, tambahkan logo ke folder proyek, tambahkan kode HTML untuk navbar, dan atur tampilan logo dengan CSS.
Dengan menambahkan logo di navbar, situs web atau aplikasi web kamu akan terlihat lebih profesional dan menarik.
Semoga artikel ini bermanfaat dan sampai jumpa kembali di artikel menarik lainnya!