I created a menu bar through bootstrap that when the window width is smaller, the nav turns into a button menu. When the window width is made smaller, the button on the right is pushed down and not aligned with the logo on the left.
For the footer, I created two columns using col-md-6 and applied text-align: left, text-align: right to each column since they were not off to the side. Now when the window width is smaller, the same thing happens: the text/column on the right is pushed down and not aligned with the text on the left.
Both the nav and footer do not vertically align properly. I've tried setting a negative margin-top on both the button and text that are being pushed down; I've also tried using pull-left and pull-right and that made no difference either. I also have no media queries but I'm not sure if that is an issue.
Here is an example and the code: http://jsfiddle.net/w92w4dak/
Any ideas on how to vertically align the nav/footer properly would be appreciated.
The .navbar-toggle button needs to be inside the .navbar-header div to achieve the desired vertical alignment.
The footer columns should have the class .col-xs-6 instead of .col-sm-6 to ensure they stay as 50% of the screen width at all screen sizes (including mobile view)
Related
I inserted tabs into a Wordpress theme and they are made of divs of different heights. When navigating from one tab to another, a few of the divs below follow the height of the tabs (moving up or down).
The footer doesn't move and I don't understand it.
Here is my website:
http://www.liveaerosmith.com/1973-03-20/
You can try by navigation the tabs INFO, SETLIST and FILES. Why is the footer staying put?
There is a fixed height set on the two columns on the page. If you remove this pixel height, the footer will adjust as you change the tabs.
try adding this to your css:
.col-md-8, .col-md-4{
height: unset !important;
}
You have a fixed height on col-md-8.
.col-md-8{
height: 944px;
}
You footer is directly up against the bottom of this element, but by setting a fixed height, it doesn't allow the col-md-8 to rescale based on the content within.
I have a problem:
I'm building a wordpress site with Bootstrap.
I have a navbar with 3 menus: Left, Middle and Right.
Every UL is surrounded by an div like navbar-menu-left or navbar-menu-right.
The left and right divs are floated left or right.
Now I want to have the middle-menu in the middle or the navbar. If I center it with text-align: center in the navbar-header div, it's centered but if there's no right menu, it is centered between the left menu and the right side of the navbar. How can I center die middle menu in the parent div and not between the floating divs?
Margin doesn't work, the navbar-menu-middle is displayed with display: inline block. If i remove the display: inline-block it is next to the right menu. The order of the menus is:
left, right, middle
The images show what I mean:
Everything good (menus have nearly the same width):
But now: (right menu isn't there, may not be needed on some pages):
The problem is, that I don't know the width of the uls..
Hope somebody can help me!
A trick would be to have width of all three menu-containers be 33%. and seting text-align:left,text-align:center and text-align:right to containers Left, Middle and Right respectively.
I was taking a look at the navbar element in Twitter Bootstrap to see how they vertically center the elements inside the navbar because that is something I am always struggling with.
I always have to resort to 'random' margin/padding values which I've been told aren't good because they are magic numbers that only work in that specific context.
Surprisingly I was not able to discovery anything that actually vertical centers the elements – no line-height trickery or anything really, no display: table-cell.
The .navbar-brand class has a line-height of 20px (like the links inside .navbar-nav) and a padding of 15px, but how does that center anything? How do they do that?
Here you can see the code of the navbar: http://getbootstrap.com/components/#navbar
The navbar uses top and bottom padding to vertically center the text:
padding-top: 15px;
padding-bottom: 15px;
They don't vertically center the text.
I tested this by adding text to a navbar element using inspect:element in Chrome. Then I forced width the same way. The text wrapped to the next line. All lines were lined up at the top, not centered.
I'm stuck with this rather odd problem that occurs whenever I place an image in one of my fluid grid layout columns. When the width of the page is anywhere above 400px, the width of the page is calculated properly. But when I shrink it down to below 400px wide, then the page stays the same width and you have to scroll left and right.
The problem even persists when I set the width image's container to, say, 50%. The image and its container shrinks, but the div that contains the image container still expands beyond the width of the screen. If I set display:none; on the image, or remove it altogether, the problem goes away and the width of the page fits the screen correctly.
Thanks!
The page: http://cdhinternational.org/index3.html I'm having trouble with the image at the bottom. (The Responsive Design Mode in Firefox is a great way to reproduce the problem. Just set it to 320x480px.)
You need to set the width of your content-container.
#content-container { width: 100%; } should do.
P.S. any particular reason the content-container is floated left? If you remove float: left; from the content-container that should also do.
I've got the layout of my site mostly done. On the domain I'm testing this layout on - http://networkgenius.org/ - there is a vertical space separating the content-wrapper div and the menu div. I have the margins set to 0px for the vertical spacing, and this is the only area that is separated like it is.
I'd like the white content area to be pressed up right against the bottom of the menu, so that none of the body's background shows between them.
What am I doing wrong?
Your navigation bar (#nav, #nav ul) has a height of 35px on it, but it seems like the background image isn't actually that tall, and since you seem to have set it to only repeat-x with a transparent color, you'll get that space.
Set it to 27px or smaller and you'll be fine (in Chrome, at least).
Jeff is right. Your #nav ul has a height larger than your navbar (and background image). Also, there is vertical padding on the nav ul as well that adds to the discrepancy.