Cara Membuat Top Navbar Fixed Dengan CSS

Daftar Isi [Tampil]

Pada artikel kali ini, saya akan membagikan cara membuat top navbar fixed dengan CSS.

Pembuatan navbar fixed cukup mudah kok, kamu tidak perlu menggunakan bantuan framework css manapun.

Cukup menggunakan CSS saja, kamu bisa membuat navbar fixed yang keren untuk digunakan.

Cara Membuat Top Navbar Fixed Dengan CSS

Oh iya, navbar fixed yang akan saya buat pastinya responsive di semua device.

Selain responsive, saya akan membagikan beberapa tips membuat navbar fixed kamu semakin user-friendly ketika digunakan.

Jadi, pastikan kamu mengikuti tutorial membuat top navbar fixed ini sampai akhir.

Untuk design navbarnya, saya akan buat sesimple mungkin. Nantinya, kamu bisa mengimprovisasi sendiri untuk design navbar, font, warna, icon, dan hal lain berkaitan dengan navbar.

Selain pembuatan top navbar fixed, saya juga sudah membagikan cara membuat form login dengan html, css, dan javascript lho.

Pastikan kamu sudah mempelajari dasar – dasar html, css dan javascript agar lebih mudah memahami script navbar fixed yang akan saya berikan. Tak perlu berlama – lama lagi, mari kita mulai pembuatan top navbar fixed dengan CSS

Persiapan Membuat Navbar Fixed

Nah sebelum membuat top navbar fixednya, ada beberapa hal yang harus kamu persiapkan. Berikut hal – hal yang perlu dipersiapkannya.

- Text Editor, saya sendiri sering menggunakan Sublime Text 3 sebagai text editornya.

Selain itu, ada beberapa text editor populer yang bisa kamu gunakan diantaranya Visual Studio Code, Atom, dan Sublime Text.

Beberapa text editor ini memiliki User Interface yang friendly dan memiliki extension yang berlimpah.

- Browser, nah untuk browser sendiri saya menyarankan untuk menggunakan Google Chrome dan Mozilla Firefox.

Karena kedua browser ini memiliki fitur yang bisa membantu kamu untuk melakukan debugging pada website.

- Buat folder projectnya, untuk project kali ini saya akan beri nama top-navbar-fixed.

- Buat file HTML dengan nama index.html

- Buat file CSS dengan nama style.css

- Buat file Javascript dengan nama main.js

Jika semua persiapan telah dilakukan, kamu bisa mengikuti langkah selanjutnya untuk membuat top navbar fixed dengan CSS.

Cara Membuat Top Navbar Fixed

Setelah melakukan beberapa persiapan, langkah selanjutnya adalah membuat kerangka htmlnya pembuatan navbar fixednya.

Nanti, saya akan memberikan beberapa tampilan menu navbar yang bisa kamu gunakan.

Kerangka HTML Top Navbar Fixed

Silahkan buka file index.html, copy script html berikut ini dan pastekan ke file index.html yang sudah saya buat sebelumnya.


<html lang="en">
<head>
	<meta charset="UTF-8"></meta>
	<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
	<title>Top Navbar Fixed</title>
	<link href="style.css" rel="stylesheet"></link>
	<link href="https://fonts.gstatic.com" rel="preconnect"></link>
	<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,600&amp;display=swap" rel="stylesheet"></link>
</head>
<body>
	<nav class="nav">
		<div class="nav-area">
			<a class="brand" href="">
				<!-- Text -->
				<span>Your Brand</span>

				<!-- IMG -->
				<!-- <img src="" alt=""> -->
			</a>

			<svg class="nav-burger" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4 6h16M4 12h16m-7 6h7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg>

			<div class="nav-menu">
				<a href="#">About</a>
				<a href="#">Contact</a>
				<a href="#">Services</a>
				<a href="#">Promo</a>

			<!-- Jika ingin 2 menu, atur script css nya pada mode dekstop ukuran 968px 
				 agar displaynya menjadi block dengan memberi komentar css .nav-menu-dekstop -->
				<a href="">Sign Up</a>
				<a href="">Login</a>
			</div>

			<!-- Jika ingin 2 menu di navbar, beri komentar script html yang ini -->
			<div class="nav-menu-dekstop">
				<a href="#">Sign Up</a>
				<a href="#">Login</a>
			</div>
		</div>
		
	</nav>
	<script src="main.js"></script>
</body>
</html>

Ada beberapa catatan penting yang harus kamu perhatikan. Navbar fixed yang saya berikan ini bisa menyimpan 2 menu atau 3 menu pada menu desktop.

Berikut tampilan navbar fixed 2 menu pada tampilan desktop

Jika ingin menggunakan tampilan navbar fixed 2 menu, kamu harus melakukan beberapa pengaturan pada file html dan css nya terlebih dahulu.

1. Pada bagian div dengan class nav-menu-dekstop, berikan komentar pada script html berikut.

2. Pada bagian div dengan class nav-menu, agar menu Sign Up dan Loginnya muncul, beri komentar css dengan nama .nav-menu- a:nth-child(5) dan (6) pada @media screen and (min-width: 968px)

Berikut tampilan navbar fixed 3 menu pada tampilan desktop

Sebaliknya, jika ingin menampilkan 3 menu pada navbar seperti gambar diatas, lakukan hal sebaliknya.

1. Div dengan class nav-menu-dekstop jangan diberi komentar

2. Settingan css pada @media screen and (min-width: 968px) dengan nama .nav-menu- a:nth-child(5) dan (6) jangan diberi komentar

Oh iya, settingan awal navbar fixed ini mengunakan 3 menu ya. Kamu bisa mengatur menjadi 2 menu dengan cara diatas.

Menambahkan CSS Pada Navbar Fixed

Setelah membuat kerangka html navbar fixednya, langkah selanjutnya ada memberikan style pada navbar tersebut agar lebih layak untuk dilihat. Berikut script css yang harus kamu copy.

* {
  padding: 0px;
  margin: 0px;
  list-style: none;
  quotes: none;
  text-decoration: unset;
  outline: none;
  border: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
  font-family: 'Poppins', sans-serif;
}

/*=============================== ===========================*/
  
 /*Catatan : Atur height pada body menjadi 100%*/

 /*Karena ini hanya contoh agar effect navbar scrollnya bisa terlihat*/

/*=============================== ===========================*/

body {
  height: 4000px;
  width: 100%;
  position: relative;
  margin: 0px auto;
  background-color: #fdfdfd;
}

.nav {
  padding: 0 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background-color: white;
  transition: .3s;
}

.nav.active {
          box-shadow: 0 2px 10px rgba(0,0,0,.1);
}

.nav.hide {
   top: -200px !important;
}

.nav-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  background-color: white;
  padding: 20px 0;

}

.brand {
  font-size: 1.5rem;
  font-weight: 600;
  color: black;
}
.brand span {
  color: black
}

.brand img {
  width: 150px;
  height: 50px;
  object-fit: cover;
}

.nav-burger {
  width: 30px;
  cursor: pointer;
}

.nav-menu {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  max-height: 0;
  opacity: 0;
  -webkit-transition: .3s ease;
  -o-transition: .3s ease;
  transition: .3s ease;
  visibility: hidden;
  margin-top: 10px;
}

.nav-menu a {
  padding: 10px 0;
  width: 100%;
  margin: 5px 0;
  color: black;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}

.nav-menu a:nth-child(6) {
  font-weight: bold;
}


.nav-menu.active {
  max-height: 200rem;
  opacity: 1;
  visibility: visible;
}

.nav-menu-dekstop {
  display: none;
}

@media screen and (min-width: 968px) {
    .nav-burger {
      display: none;
    }

    .nav-menu {
      width: inherit;
      display: flex;
      flex-direction: row;
      max-height: inherit;
      opacity: inherit;
      -webkit-transition: inherit;
      -o-transition: inherit;
      transition: inherit;
      visibility: inherit;
      margin-top: inherit;
      /*background-color: */
    }

    .nav-menu a {
      padding: 10px 10px;
      margin: 0 10px;
      width: inherit;
      /*margin: 5px 0;*/
      cursor: pointer;
      display: inherit;
      position: inherit;
      display: flex;
      position: relative;
    }

    /* Jika ingin menu di dekstop ada 3 */
    .nav-menu a:nth-child(5),
    .nav-menu a:nth-child(6) {
      display: none;
    }

    /*Jika ingin menu di dekstop ada sign up dan login, beri komentar script
      .nav-menu a:nth-child(5),
      .nav-menu a:nth-child(6) {
          display: none;
      }
    */

    .nav-menu-dekstop {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .nav-menu-dekstop a {
      padding: 5px 15px;
      width: inherit;
      margin: 0 5px;
      /*margin: 5px 0;*/
      cursor: pointer;
      display: inherit;
      position: inherit;
      display: flex;
      position: relative;
      color: black;
    }

    .nav-menu-dekstop a:nth-child(2) {
      border: 1px solid black;
      border-radius: 10px;
    }


}

Menambahkan Javascript pada Navbar Fixed

Terakhir, agar burger pada navbar bisa berfungsi, perlu bantuan javascript untuk menjalankannya. Selain menjalankan burger, saya juga akan memberikan efek scroll pada navbar.

Ketika mouse di scroll ke bawah, navbar akan menghilang dan ketika mouse di scroll ke atas navbar akan muncul.

Berikut script javascript yang harus kamu tambahkan ke file main.js


const burger = document.querySelector('.nav-burger')
const menu = document.querySelector('.nav-menu')
const nav = document.querySelector('.nav')

burger.addEventListener('click', () => {
 menu.classList.toggle('active')
})

window.addEventListener('scroll', () => {

 nav.classList.toggle('active', window.scrollY > 0)

 if(window.pageYOffset > 300) {
  toTop.classList.add('active')
 } else {
  toTop.classList.remove('active')
 }

})


let prevScrollpos = window.pageYOffset;
window.addEventListener('scroll', function() {
 let currentScrollPos = window.pageYOffset;
 if (prevScrollpos > currentScrollPos) {
  nav.classList.remove('hide') 
 } else {
  nav.classList.add('hide')
 }
 prevScrollpos = currentScrollPos;
})

Tampilan Navbar Fixed

Nah ketika semua langkah sudah diikuti, maka hasil akhirnya kurang lebih seperti ini.

Kesimpulan

Berikut cara membuat top navbar fixed dengan css yang bisa kamu ikuti.

Bagaimana menurut kamu mengenai navbar fixed diatas, apakah sangat menarik untuk kamu coba?.

Menurut saya, navbar fixed diatas sangat bagus untuk kamu gunakan, karena efek navbarnya sangat bermanfaat untuk kebutuhan user.

User tidak perlu kembali scroll ke atas, karena menu akan tetap diam diatas. Yang menariknya, ketika kamu melakukan scroll ke bawah, navbar akan menghilang. Jika kamu scroll ke atas, maka navbar akan muncul.

Jika kamu menyukai pembahasan seputar html, css, dan javascript, bisa kunjungi situs infokuy. Karena situs ini selalu membagikan tips & trik dalam membuat tampilan website secara responsive.

Coba cari lagi apa yang ada inginkan pada kolom berikut:

Donasi

Bantu Apresiasi Bantu berikan apresiasi jika artikelnya dirasa bermanfaat agar penulis lebih semangat lagi membuat artikel bermanfaat lainnya. Terima kasih.