Create fixed and Smooth Scroll Bootstrap 4 navbar by jQuery

The bootstrap4-fixed-navbar plug-in for fixed navbar

For creating a top fixed navbar based on Bootstrap 4 that scrolls smoothly, you may use the bootstrap4-fixed-navbar plug-in for that. It is a jQuery based plug-in which is only 3K size. The minified version can be even less.

By using this simple plug-in, you may create the top navigation bar towards the right or left. The items of the menu updates as a user scrolls down the page. The user may also click on menu items for directly scrolling smoothly to the target element of the same page.

Demo1 Demo2
Developer page Download plug-in

Setting up the Bootstrap 4 top right navbar

Download the plug-in from above link and get the navbar-fixed.js and navbar-fixed.css files and place both in your project directory.

Refer the CSS file in the <head> section and JS file before the body closing tag. Make sure placing JS file after the jQuery library.

See the section below for learning how to setup and use this plug-in with a live demo.

A demo of fixed Bootstrap 4 navbar towards right

For the demo, four menu items are created that is fixed towards the right top direction. For each item, a section is crated down the page. Either click on any menu item in the navbar to scroll to that section or scroll down the page.

If you scroll down, then see how menu item updates with the current section:

Bootstrap navbar top

See online demo and code

The markup for this demo:

 

See the complete code with output in the demo page along with the dependency files.

A demo of top left navbar with custom color

For creating the left aligned Bootstrap 4 based fixed menu, simply remove the justify-content-end class from the main div containing menu items.

For this demo, I have also changed a few CSS properties to change the color of active nav.

Bootstrap navbar left

See online demo and code

If you need to change the color scheme to match it with the rest of your design then play with the CSS file that comes with the plug-in.