I'm trying to make a navbar (with bootstrap).
When the media's width is > 768px I want the navbar to be on the right (so I added float: right). But when the width is <768px I want the hamburger to be on the right (like it does right now), and the element to be centered.
This is how it looks right now.
Ad this to your responsive code:
#media screen and (max-width: 768px){
.nav>li {
position: relative;
display: block;
text-align: center;
}
}
Here is a working demo
Related
Scenario :
I have two div. One div is title and another is form.
But when I resize it in some screen mobile it not correct.
Todo :
I want when I resize in some screen margin left div title and div form.It
mean when resize margin left of title according to the margin left div form.
How to fix it ?
I hope that I am getting this correct. My understanding is that you are hoping to place the title above the form when viewing on a mobile screen. This is easily done using media queries. See below. W3Schools | Media Queries
<div id="div1"></div>
<div id="div2"></div>
#media only screen and (max-width: 600px) {
.div1 {
display: block;
}
.div 2 {
display: block;
}
}
.div1 {
display: inline-block;
width: 40%;
}
.div 2 {
display: inline-block;
width: 40%;
}
Media queries are powerful because you can use them to dynamically filter styling methods like setting the divs above to display as block. (Filling the entire width of it's container) instead of being placed on the same line as the other block and taking only 40% of it's container. If needed, please submit a markup for review.
http://www.ontargettdesign.com
Hi,
I am having problem with the navigation bar and the logo when the webpage is resized to ipad size:
[IMG]http://i60.tinypic.com/4r95qo.png[/IMG]
How can I code it to be a narrower height, I feel I have tried everything!
Any help would be very much appreciated.
Thanks in advance
Your Media Queries are clipping the image. This is because the div you have is smaller than the background image being used. If you remove the "width" & height" the logo will display properly. To view this. Make you browser smaller to see the clipping occur (Because of #media). Right click on the logo and "inspect element". On the right or bottom it will show you the css that is applied to this image. You can toggle the css to see how the code effects your image.
either add background-size:contain; to both of the follow or remove the width and height.
#media (max-width: 979px) and (min-width: 769px)
.navbar-brand {
height: 32px;
width: 132px;
}
&
#media (max-width: 768px)
.navbar-brand {
height: 32px;
width: 132px;
}
To change make the navbar height the same across all media widths you will still have to mess with the media widths. Your standard height is "height: 76px;".
The first CSS is for the smallest possible screen
#media (max-width: 768px)
.navbar {
height: 76px; /* add this */
}
This is the second smallest screen (for tablets). You will not to get rid of the clear:both that is sending the navigation to the second line
#media (max-width: 979px) and (min-width: 769px)
.navbar-collapse {
float: none;
clear: both; /* DELETE THIS */
height: 100px; /* You can change this to 76px if you want to be consistent */
}
I have a fixed top navbar in Twitter Bootstrap 3.
Everything works good until 1350px. After 1350px there becomes a gap between navbar contents. So I want to center my navbar.
I checked answers on this, this and this. None of them worked for me.
This is my fiddle: http://jsfiddle.net/mcqHE/56/
Currently I use Navbar 1.
To try centering navbar, I added Navbar 2 to the fiddle.
Check fiddle in 1500px width.
* Navbar 1 is one line, not centered and has gap.
* Navbar 2 is centered, no gap, but it is two lined.
It seems like the cause is this rule: #media (min-width: 1200px) .container { max-width: 1170px; }
So how can I make navbar centered, and one line if width is bigger than 1350px ?
This is an aswer for your problem:-)
You need to add follow lines to css:
#media screen and (min-width: 1350px) {
.navbar { text-align: center; }
.navbar-header { display: inline-block; float: none !important; }
.navbar-collapse.collapse { display: inline-block !important; }
}
Here is solution on: http://jsfiddle.net/myN2s/ .
Let me know if you solve this.
Everytime when you want to center elements, you need to add text-align:center to the parent element, and display: inline-block to elements which you want to center horizontally. None of these can be floated (this is very important).
This fix wil affect all styles on your page. But I guess it is what you are asking for, there was not enough space to put in on one line.
http://jsfiddle.net/mcqHE/58/
* {
font-size:10px;
}
Although the below answer covered most of it, I noticed the menus are still not in one-line, here are the following change I've made:
1) Yes, it's the width that's creating the two-gaps but the major culprit is the .container. So remove the <div> with the class .container
2) Add this CSS to keep your menu items centered:
.navbar-inner { text-align: center; }
3) Lastly this:
.collapse.navbar-collapse.in{ display: inline-block !important; }
Binds the two <ul> elements together.
Additional:
If you want the heading 'Navbar' to be centered too, you can do:
.navbar-header { float: none; }
Here's the JSFiddle.
And it's effect on a resolution > 1350px.
for navbar 1 add the following css to this div div class="navbar-collapse navbar-part2 collapse
max-width: 1350px;
margin-left: auto;
margin-right: auto;
max width will make sure the nav part wont go wider than 1350px
margin-left:auto and margin-right:auto will center the nav.
I think this is what you're after? if not sorry!
Picture the following:
A navbar on top, a sidebar on each side of the page (left and right) and a content div sandwiched between those asides. Everything looks great on a desktop.
Enter a media query for a single column layout for mobile view. Now the layout is Nav, left sidebar underneath, content under that and the right sidebar under the content.
My question is how to get the right sidebar under the left sidebar for the mobile media query but leave it untouched for the desktop view, without touching the markup and only changing the CSS. Here is a link to a fiddle to show what I mean:
Fiddle
Everything for the desktop layout is inside of a
#media only screen and (min-width: 768px) { }
CSS block.
I know you've asked for "only changing the CSS". So first of all maybe there is a solution with the new css order functionality. But then why not using a much simpler way with changing the markup only a little bit (DEMO).
In the following example I've removed every piece of code not needed to demonstrate the solution in your fiddle.
You could just move the right sidebar before the content element and then float them left/right in desktop mode.
.sidebar {
width: 20%;
}
.content {
width: 60%;
float: left;
}
.sidebar_right {
float: right;
}
.sidebar_left {
float: left;
}
In mobile mode, you remove the float so that the 3 elements get back to their original "markup position".
#media only screen and (max-width: 768px) {
.sidebar, .content {
float: none;
width: 100%;
}
}
I am creating a design for my site using a recently downloaded bootstrap
I tried with row and span12 layout the container div is not centering to my screen. I'm using 58cm LED Monitor(its not looking centered).
The DIV width is showing 1170px(Firebug) its suppose to be 940px.
Please Check my design here http://rentbbsr.com/projects/daycare/
It suppose to be like this http://rentbbsr.com/projects/daycare/daycare.jpeg
I just want the header to be fixed and centered.
There are a bunch of reasons. You have negative left margin on the row:
#media (min-width: 1200px)
.row {
margin-left: -30px;
}
}
.row {
margin-left: -20px;
}
Then you have another margin on the span:
#media (min-width: 1200px)
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 30px;
}
class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
Then your container that you centered is wider than the contents. As it is wider, it centres that element, but it has a empty area. If you set it to the width of whatever you want to center, such as the tree graphic or the menu below, it will actually be centred.
In this case i set it to the width of the top graphic:
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 988px;
}
Remember to also set it in the media query.
So in summary, your wrapper elements are wider than the contents, and you have various margins all over the place, which adjust the width even more. If you remove those and set the correct width it will center as expected.