Leave Sidebar Expanded After User Expands It

Hello! I love your theme. The one thing I’d like to change that I’m unsure how to do is to leave the left sidebar expanded after a user expands it. I like that it starts hidden (and would like to keep it hidden when a user first arrives), but it seems difficult to have it disappear each time a user clicks on a link and loads a new page.
I’m wondering if there is a way to leave the sidebar expanded after a user clicks on it? Thank you in advance!

2 Answers

DominicStaff
answered 9 years ago

To resolve this issue, you can add the following code to the style.css file:

.container {padding: 0 40px !important;}
@media (max-width: 767px){
.container {padding: 0 20px !important;}
#page>.container{padding: 0 !important;}
}
@media (min-width: 768px) {
 #page {margin-left: 0;}
}
@media (min-width: 1200px) {
 #page {padding: 0px 40px 0;}
}
@media (min-width: 1200px) {
 .site-main,.site-main-inner {margin-left: 0;}
 .show-site-nav {display: block;}
 #page {padding:0;}
}
@media ( min-width: 768px ) and ( max-width: 9999px ) {
 .site-nav {left: 40px;}
 .site-nav-inner {padding-top: 80px;padding-bottom: 40px;}
 .site-main {padding: 80px 0 0;}
}
@media ( max-width: 9999px ) {
 .site-nav {position: fixed;top: 0;}
 .show-nav .site-nav {position: absolute;}
 .admin-bar .site-nav {top: 28px;}
 .site-main {background: #fff;position: relative;}
 .site-nav {width: 240px;border-right: 1px solid #ddd;display: none;-webkit-box-sizing:border-box;box-sizing:border-box;}
 .site-main,.site-footer {-webkit-transform: translateX(0);-moz-transform: translateX(0);-ms-transform: translateX(0);-o-transform: translateX(0);transform: translateX(0);-webkit-transition: -webkit-transform 500ms;-moz-transition: -moz-transform 500ms;-o-transition: -o-transform 500ms;transition: transform 500ms;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;backface-visibility: hidden;}
 .show-nav .site-nav{background:#fff;}
 .show-nav .site-main, .show-nav .site-footer {position: fixed;border-left: 1px solid #ddd;overflow: hidden;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-transform: translateX(239px);-moz-transform: translateX(239px);-ms-transform: translateX(239px);-o-transform: translateX(239px);transform: translateX(239px);width: 100%;}
 .show-nav .site-footer {opacity: 0;}
}

Hope this helps !

madcasey
replied 9 years ago

I tried this and I now have an unusual problem that I hope you can help me with. When I first added the code several days ago, it did not seem to work. I cleared my cache and refreshed and nothing seemed to happen to the sidebar, so I deleted the code from my CSS file.

Now, suddenly (many days after I deleted the code), the sidebar seems to be permanently expanded (with no option to close) on my site. Please view the issue here: http://www.MarkCasey.co

The only other recent change I’ve made is to add a new page template for widgetized pages, which uses a custom right-hand sidebar that should only show on that page. I doubt that broke the main sidebar, but it might’ve.

If you could take a look and suggest any advice, I would really appreciate it!

Thank you!

dominic Staff
replied 9 years ago

You can send me username & password of your site (via private answer) for further checking.

DominicStaff
answered 9 years ago

Hi,
Apologies for the delay in replying to you. I have helped you resolved it. Right now, you can check your site.
Regards,