AdminLTE 2.4.3 Demo: https://adminlte.io/themes/AdminLTE/index2.html
I'd like to collapse the left side bar but not the top nav bar when clicking the collapse icon.
I've played around with it but can't seem to find an easy solution for this. Because the collapse function is applied on the <body> tag, I'm not sure how to get around it.
For instance, I'd like it to collapse like this:
Add these styles
#media (min-width: 768px) {
.sidebar-mini.sidebar-collapse .main-header .logo {
width: 230px;
z-index: 1001;
position: relative;
color: white;
}
}
#media (min-width: 768px) {
.sidebar-mini.sidebar-collapse .main-header .logo>.logo-mini {
display: none;
}
}
#media (min-width: 768px) {
.sidebar-mini.sidebar-collapse .main-header .logo>.logo-lg {
display: block;
}
}
Related
I was commenting these code at bootstrap.css and my page is now not responsive. But my navbar still responsive. how to disable that?
/*#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}*/
Follow Bootstrap's official doc.
Bootstrap made a non-responsive.css template to disable responsiveness for your template. Take a look at this documentation: http://getbootstrap.com/getting-started/#disable-responsive
Example: http://getbootstrap.com/examples/non-responsive
But I see you want to do it your own way, so you could try this:
#media (min-width: 768px) {
.container, .navbar {
width: 750px !important;
}
}
#media (min-width: 992px) {
.container, .navbar {
width: 970px !important;
}
}
#media (min-width: 1200px) {
.container, .navbar {
width: 1170px !important;
}
}
Note that the code above will only apply to the classes container and navbar. There are other components/classes that should have static widths and heights. So I would recommend you to take a look at the example above.
Whatever I do, I can't seem to get the media queries to work properly.
So I have in my html a certain div class="check"
And in my css:
.check{
width: 100px;
height: 100px;
background-color: yellow;
}
#media(min-width: 768px){
.check{
background-color: red;
}
};
#media (min-width: 992px){
.check{
background-color: blue;
}
};
#media (min-width: 1200px){
.check{
background-color: brown;
}
};
The result is: xs: yellow ; sm: red ; md: red; lg: red
If I do:
#media(min-width: 768px) and (max-width: 992px){ same }
#media(min-width: 992px) and (max-width: 1200px){ same }
#media (min-width: 1200px){ same }
I get: xs: yellow ; sm: red ; md: yellow; lg: yellow
What am I doing wrong? How can I get it to work properly?
I could use media queries to specify a certain width for the different display styles (xs,sm,md,lg) but then I would have to repeat the widths that are part of the bootstrap media queries
#media (min-width: 768px) {
img {
width: 20%;
}
}
Question is: Can I maybe do this more DRY - without repeating the numbers?
My first thought was:
img.visible-xs {
width: 20%;
}
But apparently that class does not apply.
Any idea how to do this without using another set of media queries?
This can be done with less/sass mixins. E.g. with less just define
#screen-xs: ~"only screen and (max-width: 767px)";
#screen-sm: ~"only screen and (min-width: 767px) and (max-width: 991px)";
#screen-md: ~"only screen and (min-width: 992px) and (max-width: 1199px)";
#screen-lg: ~"only screen and (min-width: 1200px)";
and then you can use it like this
img {
#media #screen-xs {
width: 20%;
}
}
I'm building a site in Bootstrap 3.
Is there anyway to make a element use the class pull-left on smaller devices and use pull-right on larger ones?
Something like: pull-left-sm pull-right-lg.
I've managed to do it with jquery, catching the resize of the window. Is there any other way? Pref without duplicating the code in a hidden-x pull-left. Or is it considered more ok to duplicate code/content now when going responsive?
Just add this to your SASS file:
#media (max-width: $screen-xs-max) {
.pull-xs-left {
float: left;
}
.pull-xs-right {
float: right;
}
}
#media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
.pull-sm-left {
float: left;
}
.pull-sm-right {
float: right;
}
}
#media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
.pull-md-left {
float: left;
}
.pull-md-right {
float: right;
}
}
#media (min-width: $screen-lg-min) {
.pull-lg-left {
float: left;
}
.pull-lg-right {
float: right;
}
}
Insert actual px values for $screen-* if you use plain CSS of course.
HTML:
<div class="pull-md-left pull-lg-left">
this div is only floated on screen-md and screen-lg
</div>
You can use CSS Media Queries
basic usage will be like this; if you want to float left below devices of width 500px, then
#media (max-width: 500px) {
.your_class {
float: left;
}
}
#media (min-width: 501px) {
.your_class {
float: right;
}
}
There is no need to create your own class with media queries. Bootstrap 3 already has float ordering for media breakpoints under Column Ordering.
The syntax for the class is col-<#grid-size>-(push|pull)-<#cols> where <#grid-size> is xs, sm, md or lg and <#cols> is how far you want the column to move for that grid size. Push or pull is left or right of course.
I use it all the time so I know it works well.
Possibly you can use column ordering.
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
Looks like floating columns will be getting added to version 4 by like #Alex has done - https://github.com/twbs/bootstrap/issues/13690
Yes. Create your own style. I don’t know what element you’re trying to float left/right, but create an application.css file and create a CSS class for it:
/* default, mobile-first styles */
.logo {
float: left;
}
/* tablets and upwards */
#media (min-width: 768px) {
.logo {
float: right;
}
}
Don’t be afraid to write custom CSS. Bootstrap is meant to be exactly that: a bootstrap, a starter point.
This is what i am using . change #screen-xs-max for other sizes
/* Pull left in mobile resolutions */
#media (max-width: #screen-xs-max) {
.pull-xs-right {
float: right !important;
}
.pull-xs-left {
float: left !important;
}
.radio-inline.pull-xs-left + .radio-inline.pull-xs-left ,
.checkbox-inline.pull-xs-left + .checkbox-inline.pull-xs-left {
margin-left: 0;
}
.radio-inline.pull-xs-left, .checkbox-inline.pull-xs-left{
margin-right: 10px;
}
}
LESS version of #Alex's answer
#media (max-width: #screen-xs-max) {
.pull-xs-left {
.pull-left();
}
.pull-xs-right {
.pull-right();
}
}
#media (min-width: #screen-sm-min) and (max-width: #screen-sm-max) {
.pull-sm-left {
.pull-left();
}
.pull-sm-right {
.pull-right();
}
}
#media (min-width: #screen-md-min) and (max-width: #screen-md-max) {
.pull-md-left {
.pull-left();
}
.pull-md-right {
.pull-right();
}
}
#media (min-width: #screen-lg-min) {
.pull-lg-left {
.pull-left();
}
.pull-lg-right {
.pull-right();
}
}
I am having trouble getting a media query to work in bootstrap ( using rails). Below is the media query
#media (min-width: 768px) {
.center.navbar .nav, .center.navbar .nav > li {
display:inline-block;
float:none;
vertical-align:top;
width:100%;
}
.center .dropdown-menu {
display: none;
text-align:left;
}
.center .dropdown.open ul {
display: block;
}
The above media query is overriding all default behaviour no matter what the screen size is.I have received some advice from #baptme (thanks so much) to explain what is happening (which I now understand), basically because the query is using two classes and the default behaviour uses 1 class then the media query overrides. So my question is how do I get the media query to work only when the screen size is below 768px in this example and override the default styles when not
However this is where I get a little confused as when inspecting the elements in Firebug the defaults are as follows
.center.navbar .nav, .center.navbar .nav > li {
display: inline-block;
float: none;
vertical-align: top;
}
.center .dropdown-menu {
text-align: left;
}
Can anyone shed any more light on this, any help appreciated, if you would like to see it in action go to
http://46.32.253.11/
From your example:
This will hide the dropdown, remove the black hover and display the links one under the other aligned on the left:
#media (max-width: 979px) {
.navbar .dropdown-menu {display:none}
.navbar .nav > li a:hover { background-color:transparent}
.center.navbar .nav, .center.navbar .nav > li {display: table;clear:both};
}