How to create Fixed Navigation Bar (top and bottom) using bootstrap

sogata(59)

Published in

#utopian-io

Words

511

Reading

3 min

Listen

Play

What Will I Learn?

You will learn some classes of bootstrap for creating navigation bar
You will learn how to create navigation bar using bootstrap
You will learn How to make navbar fixed on top or bottom

Requirements

You have basic about HTML
You have basic about CSS
You have basic about JavaScipt
To practice this tutorial need an text editor, browser and host or install Bootstrap file (or you can also add Bootstrap CDN if you don't want to install or host it).

In this tutorial I use Visual Studio Code for Text Editor and Google Crome for Browser

Difficulty

Basic

Tutorial Contents

Fixed navigation bar is the bar that stays visible in a fixed position (top or bottom) independent of the page scroll. When you scroll the page, the navbar not move from the position. Many famous website use it, like facebook, steemit, utopian and many more.

To make this is not difficult by using bootstrap. Bootstrap has provided several classes to create that. For more details let's consider the following steps:

Open Your Text Editor, Then create a new file and save as html file. for example navbar.html
As we know, for using bootstrap we should use HTML5 Doctype.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
</body>
</html>

Because we do not host and install the bootstrap file we should add the bootstrap CDN. You can find it here . Place it in <head> element.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Coding the bootstrap. To create a navigation bar using bootstrap, we just need add the .navbar class.

<div class="navbar"></div>

To coloring the navbar, we can use .navbar-default for light color or .navbar-inverse for dark color. Add this class after .navbar class, so the code goes something like this:

<div class="navbar navbar-inverse"></div>

Wrap the navbar site. We have two choice class, .container class for fixed width container and .container-fluid for full width container.

<div class="container"></div>

Add the menu content on the bar. Use <ul> tag with .nav class and .navbar-nav to display inline navigation.

<ul class="nav navbar-nav"><ul>

To add more content in navigation we can use <li> in <ul> and write the text in <a> tag like this :

<ul class="nav navbar-nav">
                <li><a href="#">Blog</a></li>
                <li><a href="#">Comment</a></li>
                <li><a href="#">Replies</a></li>
                <li><a href="#">Wallet</a></li>
 <ul>

Add some content on the page under navbar.

<br>
    <br>
    <br>
    <h1 class="text-center">CONTENT</h1>

Save try to run on your browser.
Then try to scrall, The navbar not fixed yet on it position, To make fixed navigation bar we should add .navbar-fixed-top for top position and .navbar-fixed-bottom for bottom position. For the first, we try to create navbar fixed on the top.

<div class="navbar navbar-inverse navbar-fixed-top">

Save the file and run then try to scroll, you will get your navbar fixed on top

to make your navbar fixed on bottom change .navbar-fixed-top class with .navbar-fixed-bottom class.

<div class="navbar navbar-inverse navbar-fixed-bottom">

Finish, here the full code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>FIXED NAVBAR</title>
</head>
<body style="height:1500px">
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <ul class="nav navbar-nav">
                <li><a href="#">Blog</a></li>
                <li><a href="#">Comment</a></li>
                <li><a href="#">Replies</a></li>
                <li><a href="#">Wallet</a></li>
            <ul>
        </div>
    </div>
    <div class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="container">
            <ul class="nav navbar-nav">
                <li><a href="#">Blog</a></li>
                <li><a href="#">Comment</a></li>
                <li><a href="#">Replies</a></li>
                <li><a href="#">Wallet</a></li>
            <ul>
        </div>
    </div>
    <br>
    <br>
    <br>
    <h1 class="text-center">CONTENT</h1>
</body>
</html>