jquery - Disable responsiveness for Sidebar template -
i'm using sidebar customized css page (http://ironsummitmedia.github.io/startbootstrap-simple-sidebar/)
i want disable responsiveness, not see how it.
this custom css it, maybe i'm overseeing something?
it's this, maybe not
#sidebar-wrapper { box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.6), 0 0 50px 1px rgba(255, 255, 255, 0.5); z-index: 1000; position: absolute; right: 250px; width: 0; height: 100%; margin-right: 0%; overflow-y: auto; background: #000; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease;
}
note: i'm aware looks horrible , overshadows text, use different html page. need bar remain , not responsive!
thank you!
you have remove media query @ bottom of css.
https://jsfiddle.net/lare73s4/ @ starting @ line 133 until end of file.
if save you'll notice sidebar has disappeared, easy fix: @ top of css, change width
property of #sidebar-wrapper block.
#sidebar-wrapper { box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.6), 0 0 50px 1px rgba(255, 255, 255, 0.5); z-index: 1000; position: absolute; right: 250px; width: 250px; /* added 250px here, it's 0 */ height: 100%; margin-right: 0%; overflow-y: auto; background: #000; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease; }
the media query removed @media(min-width:768px) {
means long window @ least 768px, apply these styles declared in block. in there #sidebar-wrapper
selector has declaration of width
:
@media(min-width:768px) { #wrapper { padding-left: 250px; } #wrapper.toggled { padding-left: 0; } #sidebar-wrapper { width: 250px; /* here!!! */ } ...
so since removed it, there no longer requirements styles set.
here working code: https://jsfiddle.net/1tbdn8oo/
Comments
Post a Comment