image from w3schools In last post we understood the basic of grid system and how it helps on responsive design. This time we are going to focus on the menu bar or the navbar .

---

1. [navbar classes] In this demo, we are going to construct a navbar on top of the screen in which the links will be shown from left to right.

<nav class='navbar'>
    <a href='#' class='navbar-brand'>Site Icon</a>
        
    <div class='navbar-nav'>
        <a href='./home/' class='nav-item nav-link'>Home</a>
        <a href='./page1/' class='nav-item nav-link'>Page1</a>
        <a href='./page2/' class='nav-item nav-link'>Page2</a>
    </div>
</nav>

Classes being used: navbar - tells it is going to be a navbar, navbar-brand - class for Icon or Logo or a Name, navbar-nav - the parent of the nav-items nav-items & nav-link - the link items

---

2. [responsive] To make a navbar responsive to devices, it means that the navbar will arrange the nav-item in different way in order to fit the screen and the nav-item will be hidden. By clicking a button with class navbar-toggler , the nav-item will be shown on a dropdown list.

<nav class='navbar'>
    <a href='#' class='navbar-brand'>Icon</a>
    <!--add the toggle button-->
    <button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#navlist'>
        <span class='navbar-toggler-icon'></span>
    </button>
    
    <!--add a parent div to navbar-nav-->
    <div class='collapse navbar-collapse' id='navlist'>
        <div class='navbar-nav'>
            <a href='./home/' class='nav-item nav-link'>Home</a>
            <a href='./page1/' class='nav-item nav-link'>Page1</a>
            <a href='./page2/' class='nav-item nav-link'>Page2</a>
        </div>
    </div>
</nav>

Now, we have a button navbar-toggler which will toggle the target navbar by id #navlist. The page will not be wrapped and this button will not be available, until the page is being visited on a small screen such as smartphones.

---

3. [active link with jQuery] Bootstrap also provides a decorator for the active nav-link. The class active is used to remark the corresponding nav-item which the user is reading. Instead of adding the class manually on every page, we are going to add the class using jQuery in this demo The prerequisite is the address of each page In our examples, the addresses are: home = ./home/ page1 = ./page1/ page2= ./page2/ So here we go,

<script>
$(document).ready(function(){
    $(".nav-item").removeClass('active');
    var current = $(location).attr('href');
    
    if(current.search('home') > 0){
        $("[href='./home/']").addClass('active')
    } else if(current.search('1') > 0){
        $("[href='./page1/']").addClass('active')
    } else if(current.search('2') > 0){
        $("[href='./page2/']").addClass('active')
    }
});
</script>

This script will first remove all the active class whenever user visit a new page, then it looks for the current location and matches the nav-item. Like this: