SafelinkU | Shorten your link and earn money

Cara Membuat Menu Navbar Sticky Responsif Menggunakan Bootstrap Dengan Menambahkan Kolom Search



Membuat Navbar Sticky - Navigasi Bar digunakan untuk mempermudah pengunjung untuk berpindah dari halaman ke halaman web.

Dengan menambahkan kolom search tentu saja akan memudahkan pengunjung untuk mencari sesuatu yang ada di web tersebut. Navbar header Sticky yaitu ketika kita menscroll halaman, posisi navbar akan tetap pada letaknya yaitu dibagian atas.


Membuat Navbar Dengan menambahkan kolom search:

1. Pertama siapkan file Bootstrap
2. Kemudian buat file html di Notepad++ seperti berikut:
<html lang="en">
<head>



<title>Tutorial Membuat Navbar Responsif - Fendi Alphra</title>
<link href="/fav.png" rel="shortcut icon"></link>
<link href="css/bootstrap.min.css" rel="stylesheet"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://www.blogger.com/" target="_blank">FAM-NAVBAR</a>
</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="active" href="https://www.blogger.com/">Kamu</a></li>
<li><a href="https://www.blogger.com/">Suka</a></li>
<li><a href="https://www.blogger.com/">Dia</a></li>
<li><a href="https://www.blogger.com/">Tapi</a></li>
<li><a href="https://www.blogger.com/">Dia</a></li>
<li><a href="https://www.blogger.com/">Suka</a></li>
<li><a href="https://www.blogger.com/">Teman</a></li>
<li><a href="https://www.blogger.com/">Kamu</a></li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input class="form-control" placeholder="Cari Yang Lain Yuk !!" type="text" />
</div>
<button class="btn btn-default" type="submit">Search</button>
</form>
</div>
</div>
</nav>











<center>
<h1>
INI HANYA CONTOH YA BOSS :"</h1>
</center>
</body>
</html>

Demo Tampilan Mobile:





Demo Tampilan Desktop:






Selanjutnya bisa kamu modifikasi sendiri agar Navbar tampak elegan tapi tetap responsif.

Berlangganan update artikel terbaru via email:

0 Response to "Cara Membuat Menu Navbar Sticky Responsif Menggunakan Bootstrap Dengan Menambahkan Kolom Search"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel