Sticky breadcrumb and sidebar navs (#1198)

davidmcguiredesign · web-flow · commit f843f5653840 · 2025-01-27T09:32:49.000+03:00
close #1197
diff --git a/styles/theme-base.css b/styles/theme-base.css
@@ -532,6 +532,10 @@ pre.info {
     padding:.75rem 1.5rem 1.5rem;
     -moz-box-sizing:border-box;
     box-sizing:border-box;
+    position: sticky;
+    top: 3rem;
+    max-height: calc(100vh - 3rem);
+    overflow: auto;
 }
 #layout-content {
   padding:1.5rem;
@@ -1352,6 +1356,10 @@ div.soft-deprecation-notice blockquote.sidebar {
 @media (min-width: 768px) {
   #breadcrumbs {
     display:block;
+    position: sticky;
+    top: 0px;
+    background: var(--dark-grey-color);
+    z-index: 1;
   }
   #intro .background,
   aside.tips,
@@ -1361,8 +1369,8 @@ div.soft-deprecation-notice blockquote.sidebar {
   }
 
   #layout-content {
-    float:left;
-    width:75%;
+    float: left;
+    width: 75%;
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -532,6 +532,10 @@ pre.info {`
`532`	`532`	`padding:.75rem 1.5rem 1.5rem;`
`533`	`533`	`-moz-box-sizing:border-box;`
`534`	`534`	`box-sizing:border-box;`
	`535`	`+ position: sticky;`
	`536`	`+ top: 3rem;`
	`537`	`+ max-height: calc(100vh - 3rem);`
	`538`	`+ overflow: auto;`
`535`	`539`	`}`
`536`	`540`	`#layout-content {`
`537`	`541`	`padding:1.5rem;`
`@@ -1352,6 +1356,10 @@ div.soft-deprecation-notice blockquote.sidebar {`
`1352`	`1356`	`@media (min-width: 768px) {`
`1353`	`1357`	`#breadcrumbs {`
`1354`	`1358`	`display:block;`
	`1359`	`+ position: sticky;`
	`1360`	`+ top: 0px;`
	`1361`	`+ background: var(--dark-grey-color);`
	`1362`	`+ z-index: 1;`
`1355`	`1363`	`}`
`1356`	`1364`	`#intro .background,`
`1357`	`1365`	`aside.tips,`
`@@ -1361,8 +1369,8 @@ div.soft-deprecation-notice blockquote.sidebar {`
`1361`	`1369`	`}`
`1362`	`1370`
`1363`	`1371`	`#layout-content {`
`1364`		`- float:left;`
`1365`		`- width:75%;`
	`1372`	`+ float: left;`
	`1373`	`+ width: 75%;`
`1366`	`1374`	`}`
`1367`	`1375`	`}`
`1368`	`1376`