Cara mengatur posisi text pada Navbar dengan CSS + HTML

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Angga Rista October 21, 2020

Ketika membuat navbar, posisi text menu sangat mempengaruhi tamplian dari sebuah website. Kali ini kita akan mencoba mengatur posisi text pada navbar.

Langkah 1 – Tambahkan HTML

<div class="topnav">
  <a class="active" href="#">Beranda</a>
  <a href="#">Berita</a>
  <a href="#">Kontak</a>
  <div class="topnav-right">
    <a href="#">Cari</a>
    <a href="#">Tentang</a>
  </div>
</div>

Langkah 2 – Tambahkan CSS

/* warna background */
.topnav {
    background-color: #333;
    overflow: hidden;
}

/* warna link */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* ganti warna link ketika mouse lewat*/
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* ganti warna link yang aktif */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

/* posisi kanan */
.topnav-right {
  float: right;
}

Berikut adalah hasilnya

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-right {
  float: right;
}
</style>
</head>
<body>

<div class="topnav">
  <a class="active" href="#">Beranda</a>
  <a href="#">Berita</a>
  <a href="#">Kontak</a>
  <div class="topnav-right">
    <a href="#">Cari</a>
    <a href="#">Tentang</a>
  </div>
</div>
</body>
</html>

Sekian materi kita untuk kali ini. Sampai ketemu di materi berikutnya.