summaryrefslogtreecommitdiffstats
path: root/site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.css
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2023-06-24 12:44:40 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2023-06-24 12:44:49 +0000
commitdb46bfc03f3a22752ef6bd91ae577d893872a216 (patch)
tree89d924513bc95e6bac4dc8e26f0da84caa477b7b /site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.css
parentReleasing debian version 5.2.3+dfsg-8. (diff)
downloadbootstrap-html-db46bfc03f3a22752ef6bd91ae577d893872a216.tar.xz
bootstrap-html-db46bfc03f3a22752ef6bd91ae577d893872a216.zip
Merging upstream version 5.3.0+dfsg.
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.css')
-rw-r--r--site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.css52
1 files changed, 52 insertions, 0 deletions
diff --git a/site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.css b/site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.css
new file mode 100644
index 0000000..f855b96
--- /dev/null
+++ b/site/content/docs/5.3/examples/offcanvas-navbar/offcanvas-navbar.css
@@ -0,0 +1,52 @@
+html,
+body {
+ overflow-x: hidden; /* Prevent scroll on narrow devices */
+}
+
+body {
+ padding-top: 56px;
+}
+
+@media (max-width: 991.98px) {
+ .offcanvas-collapse {
+ position: fixed;
+ top: 56px; /* Height of navbar */
+ bottom: 0;
+ left: 100%;
+ width: 100%;
+ padding-right: 1rem;
+ padding-left: 1rem;
+ overflow-y: auto;
+ visibility: hidden;
+ background-color: #343a40;
+ transition: transform .3s ease-in-out, visibility .3s ease-in-out;
+ }
+ .offcanvas-collapse.open {
+ visibility: visible;
+ transform: translateX(-100%);
+ }
+}
+
+.nav-scroller .nav {
+ color: rgba(255, 255, 255, .75);
+}
+
+.nav-scroller .nav-link {
+ padding-top: .75rem;
+ padding-bottom: .75rem;
+ font-size: .875rem;
+ color: #6c757d;
+}
+
+.nav-scroller .nav-link:hover {
+ color: #007bff;
+}
+
+.nav-scroller .active {
+ font-weight: 500;
+ color: #343a40;
+}
+
+.bg-purple {
+ background-color: #6f42c1;
+}