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.
- 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
- 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).
- 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.
- 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