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

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>

LIVE DEMO

Curriculum

Place here a list of related tutorials you have already shared on Utopian that make up a Course Curriculum, if applicable.

Posted on Utopian.io - Rewarding Open Source Contributors

Hey @sogata I am @utopian-io. I have just upvoted you!

Achievements

Seems like you contribute quite often. AMAZING!

Suggestions

Contribute more often to get higher and higher rewards. I wish to see you often!
Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

Vote for my Witness With SteemConnect
Proxy vote to Utopian Witness with SteemConnect
Or vote/proxy on Steemit Witnesses

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

Sort:

Trending