Bootstrap 4 tutorial

Components (10): Navbar: Placement/Sticky top

The bar below is the live example of a sticky-top navbar nav.navbar.sticky-top.

Scrolls up with the page (body) upto the top of the page
Stays at the top to further scroll-ups

↓↓↓↓↓ This bar ↓↓↓↓↓

↑↑↑↑↑ This bar ↑↑↑↑↑

Caution: It uses CSS position: sticky . But it is not supported in every browser (IE10 and IE11 do not support) (check for caniuse - CSS position:sticky ).

(Dummy contents for scrolling below)

Bootstrap 4 tutorial

Navbar

Placement / Sticky top

Picture 1

Picture 2

Picture 3

Slide 1

Slide 2

Slide 3