$background: #333; $hoverBackground: #222; $activeBackground: $hoverBackground; $foreground: white; $lightgrey: #eee; $titleFontSize: $font-size-h1 - 10px; $titleMarginBottom: 20px; $mainPadding: 20px; $condensedNavPadding: 5px; .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1000; display: block; padding: 20px; overflow-x: hidden; overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ background-color: $background; color: white; border-right: 1px solid $lightgrey; } /* Sidebar elements */ .link { color: $foreground; text-decoration: none; } .link:hover { color: $foreground; background-color: $hoverBackground !important; } .link:focus { color: $foreground; background-color: transparent !important; } .active { composes: link; background-color: $activeBackground !important; } .active:focus { background-color: $activeBackground !important; } .title { margin: 0; margin-bottom: $titleMarginBottom; font-size: $titleFontSize; } .imgTitle { height: $font-size-h1; } /* Sidebar navigation */ .icon-navbar { background-color: #555; font-size: 1.2em; border: none; .container-fluid { padding-left: 0; padding-right: 0; } .nav { display: inline-block; float: none; vertical-align: top; text-align: center; li { float: left; } } } /* * Main content */ .main-panel { padding: $mainPadding; } /* * Media queries */ @media (min-width: 992px) and (max-width: 1199px) { .icon-navbar { .nav { li { float: none; } } } .nav-list { text-align: right; } .nav { li { a { padding-left: $condensedNavPadding; padding-right: $condensedNavPadding; } } } } @media (max-width: 991px) { .sidebar { position: static; } }