การ fixed top navbar และ static top navbar สองแบบนี้ต่างกันตรงที่ static top navbar เวลาเราเลื่อนหน้าเพจลงมาเรื่อยๆ แล้วเวลาเราจะเลือกเมนูใหม่ เราก็ต้องเลื่อนขึ้นไปบนสุดของหน้าเว็บ แต่ถ้า fixed top navbar ปัญหาที่กล่าวมาจะไม่เกิดขึ้น เพราะ วิธีนี้จะทำให้ user (ผู้ใช้) เห็นเมนูของหน้าเว็บเสมอ
1. static top navbar สตาติก ท๊อป แน๊บบาร์ สังเกตดูที่ภาพ navbar จะค่อยๆหายไปเมื่อเลื่อนเพจลงมาข้างล่าง
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<title></title>
</head>
<body>
<nav class="navbar navbar-default ">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Brand</a>
</div>
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<title></title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Brand</a>
</div>
</div><!-- /.container-fluid -->
</nav>
</body>
</html>