I am creating a website using Bootstrap and want to resize the Navbar height when the browser screen is min-width: 268, I am using a media query to do this but for some reason the media query changes the height of the Navbar before the screen has been made smaller, can someone please help, code is below.
.navbar-inverse {
background-color: #fff;
border-color: transparent;
height: 105px;
}
#media only screen and (min-width: 268px) {
.navbar-inverse {
background-color: #fff;
border-color: transparent;
height: 50px;
}
}
If you want this style to apply when the width is LESS than 286px, use max-width. Try this:
#media only screen and (max-width: 268px) {
.navbar-inverse {
background-color: #fff;
border-color: transparent;
height: 50px;
}
}
Related
In bootstrap 3, I want the navbar to be collapsed by default for all screen sizes.
I have found here that Bootstrap 3 being mobile first, its navbar is "collapsed" by default and and "expands" when it reaches a certain minimum size.. Following that post, I tried messing around with #grid-float-breakpoint for customized css, but I got nowhere. Please guide me from here.
You could use CSS to override the Bootstrap 3 defaults. For example, this would set the navbar to collapse on screen widths less than 2000 pixels (accommodating most screens)..
#media (max-width: 2000px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
Demo: http://www.bootply.com/122572
Update for Bootstrap 4 (beta)
In Bootstrap 4 the navbar is always collapsed into the mobile/hamburger version by default: Demo. The navbar-expand-* class are used to change the breakpoint.
I am trying to use media queries to make my layout responsive to the screen size. I'm just testing it out at the moment and I can't for the life of me get the method to work. I simply set up a media query that's supposed to change the background color of my links to red when the screen goes below 480px, but it just doesn;t work when I shrink my screen.
You can see this in action at http://www.noellesnotes.com
Any help would be appreciated.
Here's the relevent code:
HTML:
<div class="site-navigation">
About
Work
<div class="site-title">Noelle Devoe</div>
Blog
Contact
</div>
CSS:
.site-navigation a{
width: 125px;
float: left;
padding: 50px 0 50px 0;
letter-spacing: 4px;
text-transform: uppercase;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color: rgb(82,82,82);
}
.site-navigation a:hover{
font-weight: bold;
background-color: rgb(242,168,134);
color: rgb(255,255,255);
text-shadow: rgb(200, 200, 200) 1px 1px 0px;
}
#media only screen and (max-device-width: 480px) {
.site-navigation a{
background-color: red;
}
}
change your max-device-width to max-width
#media only screen and (max-width:480px){
.site-navigation a {
background-color: red;
}
}
Should do the trick for you. Also a great page to look at is the media queries page on MDN
USE IT LIKE THIS:
#media only screen and (max-width: 480px){
}
this would be a good read http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
i want to set my bootstrap navigation as responsive in any width that i want. For example in 1200 pixels width it should act like normal navigation but in 1110 pixels width; i want to set menu to go responsive. I tried to make it with jquery but no response. Is there anyway to do that?
You can override the default Bootstrap navbar toggle threshold using a CSS media query like this..
#media (max-width: 1110px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
Demo: http://bootply.com/98488
(this example uses 1280, but you can change it to 1110 to see the navbar collapse)
Can we set width of browser to display the collapse button of a navigation bar in bootstrap??
I think media queries may help me with this..but i don't know to set min width of browser window
You can use a media query for this. For example, this would make the collapse button toggle at 1280 pixels..
#media (max-width: 1280px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
Example on Bootply: http://bootply.com/98488
If you are using bootstrap-3,you can use col
<div class="col-md-8">.col-md-8</div>
for details http://getbootstrap.com/css/
Go to http://getbootstrap.com/customize/ the #grid-float-breakpoint is the last field in this screen shot, there you can enter the breakpoint (#screen-sm-min - 768px, #screen-mid-min - 992px) of where you want the menu to turn into the collapsed version.
I have the following media query which applies the background style to the body successfully, however it does not change the others, any ideas pleople?
#media (min-width: 980px) and (max-width: 1200px) {
body {
background:#F00;
}
.contentsearch.navbar {
margin-left: -475px !important;
top: 200px !important;
width: 950px !important;
}
.contentTabs {
margin-left: -475px !important;
width: 948px !important;
}
.ui-tabs-panel {
width: 948px !important;
}
}
heres the original css for these elements
.contentsearch.navbar {
position:absolute;
top:200px;
width:1170px;
left:50%;
margin-left:-585px;
}
.contentTabs {
border-bottom: 1px solid #AAAAAA;
border-left: 1px solid #AAAAAA;
border-right: 1px solid #AAAAAA;
bottom: 55px;
height: auto !important;
left: 50%;
margin-left: -585px;
position: absolute !important;
top: 241px;
width: 1168px;
}
.ui-tabs-panel {
border-bottom: 1px solid #DDDDDD !important;
border-top: 1px solid #CCCCCC !important;
bottom: -1px !important;
height: auto !important;
overflow: auto;
position: absolute !important;
top: 47px !important;
width: 1168px;
}
Try with this :
#media all and (min-width: 980px) and (max-width: 1200px){
....
}
You forgot declared on what type of screen you want it to be active
#media all and.....
You have :
all
screen
print
handheld
tv
etc..
You have excellent article for this
Without media type it works anyway.
If you resize browser nothing happens?
Original css should be displayed when your screen size has more than 980px, correct?
I have solved the issue, thanks for your responses.
The problem was i was copy and pasting styles from another application, in transit them seem to have picked up some kind of strange formatting/characters, after rewriting them by hand it now works!