Bootstrap 4 Fixed Navigation Bar on Top

In this article, we are going to create Bootstrap 4 navbar fixed top. In this lesson, we will create a Fixed Navigation bar on the top using bootstrap. Bootstrap is the lightweight framework to build simple and complex website design. we used to use bootstrap for creating a website. When you need to fixed navbar on the top and it is really very important. So in this lesson, we are creating this bootstrap navbar example.

Bootstrap 4 navbar fixed top

We are creating this tutorial. we had created a responsive menu which is mobile friendly. So when you resize the screen you will see bootstrap toggle button on the left side. So it is pretty much responsive. We are creating a navbar with nav items. it contains home, blog, services, contact us and about us. We will use Drop-down menu for Services nav item.

So let’s create Bootstrap 4 navbar fixed top example.

Create index.html

First, You need to create an Index.html file. you are free to choose any other name for this file. Create this file and add simple HTML snippets. Make sure this snippet contains meta tag. This meta tag has name viewport and content  width=device-width  part sets of the width of the page follow the screen width of the device. But you don’t care about it. we had added all the necessary in the index.html file. So you can just import it into your file.

Import this code in index.html 

Copy the exact same code in your HTML file. In this code, we had link bootstrap.min.css file in the head tag. Then create a navbar in the body tag. In the navbar code, we will add navbar brand with the toggle button. So when you resize the window you will see toggle button with nav item.

We had also added an input text and button in the navbar. This form control is on the right side of the navbar. You can place it on the left side also. The scroll demo text is only for maximizing the page. You can remove it and add your own text also. but it is only for example. So when you run you will see Bootstrap 4 navbar fixed top.

All the code used in this tutorial is tested and compiled. So you can just copy all this code and put it in your HTML files. We do have some more article on bootstrap and also have some examples. So must Read them I think this article will help you.

That’s it. If you have any question then comment us and if you have any suggestion or opinion please write it in the comment. Follow us on Youtube, Facebook, and Instagram.

Thank You.