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

Iklan 728x90

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.

Baca Juga
SHARE
Subscribe to get free updates

Related Posts

Post a Comment