A lot of websites, require a top navigation bar that sticks to the top, irrespective of the screen dimension size. This blog deals with how the top navigation bar was made sticky in Susper.

1. Using the correct Bootstrap classes. Notice the code enveloping the navigation bar.

Points to note:

• Using navbar and navbar-default creates a standard gray navigation bar.
• Using navbar-static-top makes the navbar stick only to the top of the page and disappear on scrolling down.
• Using container-fluid creates a container for the contents of the navbar with wide margins

2.  Now we also need to write some personalized CSS code. Notice the classes navcontainer and  top-nav. This is the CSS code for these classes:

Points to note:

• Margin and padding can be set according to how the navbar should look. Click here to know the difference between margins and padding.
• The height has been customized to 65px in Susper, with a width of 100vw(entire viewpost width).

3. Lastly, if your navigation bar is inside the body tag, remember that by default, body has a top margin of 57 px. As a result you may see an extra white space on top of your navigation bar. To remove this:

• Move the navigation bar code out of the body tag. If you can’t then,
• Place your navigation bar in a container ( resultContainer on the Susper result page) and write this in your CSS file.

References:

• For a tutorial on the various Bootstrap classes on navigation bars refer to: https://www.w3schools.com/bootstrap/bootstrap_navbar.asp
• For a tutorial on the making sticky navigation bars refer to: https://stackoverflow.com/questions/14667829/how-to-create-a-sticky-navigation-bar-that-becomes-fixed-to-the-top-after-scroll