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!
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.
in the past couple of days I've been trying to stretch a certain section to fill the entire container, and I got it working. Problem is, in mobile/tablet a left-right scroll bar appears and it also messes up the sticky header.
Page that I stretched: https://roi.pub/about-me/
Code I used:
#primary .container {
padding-right: 0px;
padding-left: 0px;}
.layout-content.boxed #primary {
padding: 0px;
}
#media only screen and (min-width: 768px) {
.layout-content.boxed #primary{padding: 0 !important;}
}
And here's what a page looks like prior to stretching: https://roi.pub/elementor-2620/ I'm just trying to get the content to fill the white container without messing things up.
Advice will be appreciated.
You removed padding from the .container class, which is what needs to be there for bootstrap to work like it should.
NOTE Never override bootstrap added classes, if you want to change how bootstrap work, pull in sass/less version and do your stuff there.
On the .row bootstrap use -15px on left and right to accommodate for padding of 15px on left and right of the .container, thus when you remove padding from .container you get mess, don't override bootstrap.
#primary .container {
padding-right: 0px;
padding-left: 0px;
}
.container needs to have padding of 15px, those lines above is what makes your horizontal scrollbar. When I remove them everything work fine.
If you are not bothered with overrding bootstrap (you should) instead of setting padding to zero on the .container you need to set padding to zero on the columns itself. Like this.
.full-width {
padding: 0;
}
You already have that class, on the element that also have .col from bootstrap.
GENERAL COMMENT
If you find yourself in a need to change bootstrap setting you should use sass/less to alter the setting, but if you find yourself in a need to change bootstrap behavior then DON'T use bootstrap.
Your problem has appeared from the 1170px width of the screen (this is the width of your theme too).
so there are two solutions
Remove the -15px from the margin from the max-width media query: 1170px, and also remove the #primary #content #main paddding
#media (max-width: 1170px){
#primary #content #main {
padding-left: 0;
padding-right: 0;
}
#primary #content {
margin-left: 0;
margin-right: 0;
}
}
Either apply this code #primary .container {overflow: hidden;} on the container to hide any overwriting
I am trying to centre the nav-bar links. But sadly i haven't had much luck so far. I've tried to use navbar-justified but that just throws every thing out of proportion.
here is the code.
I assume you wanted to center everything to the center. The easiest way is to use display: inline-block and then text-align: center on the parent element. Then also reset float to use the default aligment:
See you updated demo: http://www.bootply.com/iu9NOXfmEV
Make the container inline-block to get the width of the content, and align the navbar elements. To get rid of the gap underneath use vertical-align: top.
To avoid changes when collapsed add media query:
#media (min-width: 768px) {
.navbar {
text-align:center;
}
.navbar .container-fluid {
display: inline-block;
vertical-align: top;
}
}
You can see here
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
parent container => flexible width(width depends on browser window)
child div => fixed width of 900px (inside parent)
My requirement is
if width of parent is more than 900 then align child div in center
if width of parent is less than 900 then align child div to the right. Hence left portion will be truncated.
Is there any pure css solution?
I fiddled it a little.
you basically need this, am I right?
#parent{
background-color: blue;
overflow: hidden;
direction:rtl;
}
.child{
width:900px;
float:right;
margin: 0 auto;
direction:ltr;
}
So direction to align the divs without making the child div float to the walls, and another direction inside child to not mess up the contents inside. margin: 0 auto; to center the div and overflow:hidden to truncate.
EDIT: Try it now.
you can try with media query..
For example:
#media only screen and (max-device-width: 900px) {
.div { margin: 0px auto }
}
#media only screen and (min-device-width: 900px) {
.div { float: left; }
}
You can try to combine css with that...
parent {direction:rtl}
child {direction:ltr;}
Basicly, overflow will scroll from right to left or will hide left side if hidden;
test and play with it here :) : http://codepen.io/gcyrillus/pen/GHCne
Have you looked into using media queries?
You'll just want to make sure they're supported in all the browsers you're targeting.