Fix left sidebar display with proper width and positioning

This commit is contained in:
Hugh Ratsch
2025-03-02 12:30:54 -06:00
parent f89f7c016d
commit 3525a5509a
+41 -8
View File
@@ -1,16 +1,37 @@
/* Custom styling for IT Learning Notes */
/* Show the left navigation sidebar but modify styling */
/* Show the left navigation sidebar and ensure it displays properly */
.sidebar {
display: block !important;
width: auto !important;
visibility: visible !important;
width: 300px !important;
min-width: 300px !important;
max-width: 300px !important;
position: fixed !important;
left: 0 !important;
top: 0 !important;
bottom: 0 !important;
height: 100% !important;
overflow-y: auto !important;
z-index: 10 !important;
background-color: rgba(245, 245, 247, 0.95) !important;
border-right: 1px solid #e1e4e8 !important;
}
.sidebar-scrollbox {
padding: 10px !important;
height: auto !important;
overflow-y: auto !important;
}
/* Fix main content positioning to accommodate proper sidebar */
#content {
margin-left: 300px !important;
padding-left: 15px !important;
}
body {
overflow-x: hidden !important;
}
/* Hide the floating right-side table of contents - using more specific and aggressive rules */
@@ -45,7 +66,7 @@ aside.sidebar-right,
/* Make content take up appropriate width */
.content-wrap {
margin-left: auto !important;
margin-left: 300px !important;
margin-right: auto !important;
max-width: calc(100% - 300px) !important;
padding: 0 30px !important;
@@ -62,6 +83,23 @@ article,
padding-right: 0 !important;
}
/* Fix theme-specific sidebar issues */
.light .sidebar,
.rust .sidebar,
.coal .sidebar,
.navy .sidebar,
.ayu .sidebar {
display: block !important;
width: 300px !important;
visibility: visible !important;
}
/* Ensure menu button works with sidebar */
#menu-bar {
z-index: 11 !important;
position: relative !important;
}
/* Improve chapter navigation */
.chapter {
line-height: 1.3 !important;
@@ -217,11 +255,6 @@ th {
display: block !important;
}
/* Ensure main menu button is visible */
#menu-bar {
z-index: 10 !important;
}
/* Make menu button more visible for navigation */
#menu-bar i {
font-size: 1.5em !important;