diff --git a/css/container.css b/css/container.css index 2996adc..45ef6ea 100644 --- a/css/container.css +++ b/css/container.css @@ -4,6 +4,7 @@ */ .container { + position: relative; width: 100%; padding: 0 calc(var(--grid-gutter) / 2); margin: 0 auto; diff --git a/css/navbar.css b/css/navbar.css index 5cff9cc..9926a2c 100644 --- a/css/navbar.css +++ b/css/navbar.css @@ -38,6 +38,17 @@ margin: 1.25rem 0; min-height: var(--navbar-height); padding: 0 1.25rem; + + &.fixed { + position: fixed; + top: 0; + left: 0; + right: 0; + width: 100%; + z-index: 1030; + border-radius: 0; + margin: 0; + } } .navbar .brand { @@ -193,3 +204,11 @@ display: block; } } + +body.has-fixed-navbar { + padding-top: calc(var(--navbar-height) + 20px); +} + +.container.has-fixed-navbar { + padding-top: calc(var(--navbar-height) + 20px); +} diff --git a/tests/navbar-fixed.html b/tests/navbar-fixed.html new file mode 100644 index 0000000..f144011 --- /dev/null +++ b/tests/navbar-fixed.html @@ -0,0 +1,62 @@ + + + + + + Fixed Navbar + + + + + + + + + +
+ + + +
+

Fixed Navbar Demo

+

This navbar stays at the top as you scroll down.

+
+ + +
+

Scroll down

+

The navbar remains fixed at the top.

+
+
+ + + + diff --git a/tests/navbar.html b/tests/navbar.html index 1834d20..1163457 100644 --- a/tests/navbar.html +++ b/tests/navbar.html @@ -15,11 +15,11 @@