Commit 9d6e0c50 authored by Phil Hughes's avatar Phil Hughes

Left sidebar overlaps the content on mobile devices

parent 37ba5a12
$(document).on("click", '.toggle-nav-collapse', (e) ->
e.preventDefault()
collapsed = 'page-sidebar-collapsed'
expanded = 'page-sidebar-expanded'
mobileWidth = 768
collapsed = 'page-sidebar-collapsed'
expanded = 'page-sidebar-expanded'
toggleSidebar = ->
$('.page-with-sidebar').toggleClass("#{collapsed} #{expanded}")
$('header').toggleClass("header-collapsed header-expanded")
$('.sidebar-wrapper').toggleClass("sidebar-collapsed sidebar-expanded")
......@@ -14,4 +14,13 @@ $(document).on("click", '.toggle-nav-collapse', (e) ->
niceScrollBars.updateScrollBar();
), 300
$(document).on("click", '.toggle-nav-collapse', (e) ->
e.preventDefault()
toggleSidebar()
)
$(document).ready ->
if $(window).width() < mobileWidth
if $('.page-with-sidebar').hasClass(expanded)
toggleSidebar()
......@@ -141,17 +141,17 @@ header {
margin-left: $sidebar_collapsed_width;
}
@media (max-width: $screen-md-max) {
@media (max-width: $screen-sm) {
.header-collapsed {
margin-left: $sidebar_collapsed_width;
}
.header-expanded {
margin-left: $sidebar_width;
margin-left: $sidebar_collapsed_width;
}
}
@media(min-width: $screen-md-max) {
@media(min-width: $screen-sm) {
.header-collapsed {
@include collapsed-header;
}
......
......@@ -39,7 +39,7 @@
}
.sidebar-wrapper {
z-index: 99;
z-index: 999;
background: $background-color;
}
......@@ -203,7 +203,11 @@
}
@mixin expanded-sidebar {
padding-left: $sidebar_collapsed_width;
@media (min-width: $screen-sm-min) {
padding-left: $sidebar_width;
}
&.right-sidebar-collapsed {
/* Extra small devices (phones, less than 768px) */
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment