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!
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 !
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!
You can send me username & password of your site (via private answer) for further checking.
Hi,
Apologies for the delay in replying to you. I have helped you resolved it. Right now, you can check your site.
Regards,
Please login or Register to submit your answer