There are several questions about centering Twitter bootstrap's brand or centering the list items in the navigation bar, but I haven't figured out, how to center both.
Here is an example, used in Modify twitter bootstrap navbar, but it only centers the list items, not the brand.
Here is the structure of the HTML:
<div class="navbar navbar-fixed-top center">
<div class="navbar-inner">
....
</div>
</div>
And the CSS:
.center.navbar .nav,
.center.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.center .navbar-inner {
text-align:center;
}
Here a live demo: http://jsfiddle.net/C7LWm/
How would I center both the brand and the list items, so that both are centered on one line?
EDIT:
I just noticed that if you have a dropdown in the nav bar (like in your updated answer), the dropdown is really messed up (dropdown not showing up at all, if it shows up, the form background disappears).
A better way would probably be, if all the items are not centered and have a line by its one, instead they should all be on one line and then be centered, similiar to the non-responsive view, except now, there is a second line.
Is that possible?
To center a UL you don't need to write any classses.
Bootstrap provides everything you need, just do this:
<ul class="list-inline center-block text-center">
// your list
</ul>
What you need to center is not the <li> but their container. It doesn't matter if a child element is floating, only the parents that you actually want to center need to be inline-blocks.
I wouldn't say that it's nice, and you may need a different behavior on smaller screens, but this works in the demo :
.navbar .brand,
.nav-collapse {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.navbar-inner > .container { text-align:center; }
Make sure your selectors are specific enough to target only the elements you want (i.e. not the collapse button)
Update with responsive navbar : Responsive demo
#media (max-width: 979px) {
.navbar .brand,
.nav-collapse {
display: block;
}
}
Related
JS Fiddle here
I am attempting to align child elements evenly between left and right. I tried using margin-left and right: auto but nothing happened.
Here is a screen shot of the navigation in question. I have added a border of 1 px around each element so you can see:
I'd like the nav line items to be centred in comparisson to their parent. So in the image the line items would move to the right a bit to be centred between the parent rectangle, which is an unordered list.
Here is my approximation of the relevant html:
<nav>
<div id="main-nav">
<ul id="menu-main">
<li>cats</li>
<li>dogs</li>
<li>sheep</li>
</ul>
</div>
</nav>
Currently relevant (I think) CSS is:
#main-navigation {
display: inline;
float: left;}
#main-navigation div {
display: block;}
#menu-main {
position: relative;
float: left;}
#menu-main li {
float: left;
}
Put another way, I'd like to centre floated child elements against the parent. If I zoom in and out with my browser I can see that the nav adjusts and change size with some line items moving between top and bottom row in order to fit.
But is there a way to ensure that, whatever the current size of the nav, the child line items will be centred?
Here's another picture, where I have manually added a margin left to #menu-main.
Now it looks more centred on my screen right now. But is there a way to auto centre it?
See this : http://jsfiddle.net/rahjrLny/1/
You don't need to float your li elements, simply set them to display:inline . Then you can add text-align: centre to your ul element, and all should be good.
(You'll need to remove some margins that have appeared in the fiddle due to the changes)
This would be my solution: JSFiddle
There's some redundant CSS (for example, no need to specify #main-navigation div {display: block;} if you don't have any div elements inside the #main-navigation).
I've gone with display:inline-block as opposed to display:inline (plus added some colour borders for visual clarity). Please bear in mind I'm working with the code you supplied in the question rather than building the code from the screenshots.
nav {display:inline-block; width:100%;}
#main-nav {
float:left;
width:100%;
}
ul#menu-main {
margin:0;
padding:0;
text-align:center;
width:100%;
float:left;
}
#menu-main li {
list-style: none;
padding: 0.5em;
display:inline-block;
}
EDIT: I answered this question before I observed there was a fiddle supplied, and worked instead from the code supplied in the question. This may not be the right answer for OP but I'm going to leave it alone for now as I believe it gives a valid example of how one could approach the task of centering a nav list.
The first situation I have with my website is the border bottom of my navigation bar. I have tried changing the box-sizing to border-box but it still doesn't work. I want the border to be 100% width of the browser.
Second, I'm trying to create a responsive menu for both tablet and mobile changing my list items into a hamburger slider. Right now, it is awkward since my header image is floated left, and when i put in the hamburger menu, it does not jump below the logo even after i put clear both. Also, the border of the li is messed up, I want it to fill the width of the screen..
I have yet to put the javascript for the menu icon yet, I don't want to continue until I find a fix to these problems please help :(
html:
<header>
<img src="images/brand.png" alt="George Designs Logo" class="brand">
<img src="images/menu.png" alt="menu" class="menu-trigger">
<nav class="nav-menu">
<ul class="clearfix">
<li>Home</li>
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
The css is in the js fiddle
Here is the full project:
http://jsfiddle.net/ntnzz1fj/2/
You have set some margins which are unwanted on mobile or tablet deives.
You need to remove them for mobile devices in order to have a full width menu.
#media screen and (max-width: 768px) {
.nav-menu {
margin: 0;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
margin-right: 0;
}
}
JSFiddle DEMO
Also remove the browser default margin.
body {
margin: 0;
}
As for making elements fit the whole width of the screen, this combination will ensure it's a block element.
.myElement {
margin: 0;
padding: 0;
display: block;
}
Make to include margin: 0; on the body as well. I would recommend using Normalize.css before your main stylesheet. This normally prevents a lot of common kinks in styling.
http://necolas.github.io/normalize.css/
I have a problem with a div in IE7, it's disappearing and I don't understand why.
I already tried to add zoom:1 and overflow: hidden as someone suggested but it is not working.
The div is inside an unordered list (floated left) as the last element, floated right.
This is the HTML
<div id="top_menu">
<ul id="dropmenu">
<li>menu item1</li>
<li>menu item2</li>
...
</ul>
<div class="lang">content</div>
</div><!-- end top menu -->
This is the CSS
#top_menu {width:900px;font-size:13px; }
#top_menu ul#dropmenu {width:630px; height:28px; margin:0px; padding:0px; list-style:none; float:left; }
#top_menu ul#dropmenu li {float:left;display:block;}
.clearfix {display: inline-block;} /* for IE/Mac */
#top_menu .lang { width: 120px; color:#fff; margin:4px 10px 0 0; float: right; }
#top_menu .lang a{ color:#ff8601; }
#top_menu .lang a:hover{ color:#fff; }
Thanks for your help
EDIT: I included the html and removed url to avoid client complaints.
You need to add .clearfix to div#top_menu and add height: 24px; to div.lang
That fixed all the menu problems for me.
edit
...and probably don't use absolute positioning to solve layout issues.
i'm on IE9 now, but putting this site into "Compatibility View" seems to show the issue too.
The last entry in the main menu [ul] seems to extend all the way to the right of the element. This appears in markup before the .lang div so I wouldn't expect it to be covering it up...
Have you maybe tried putting the .lang element into "position:absolute" and then seeing if it shows up, (obviously assuming the parent element of it is positioned relatively). After that maybe try absolute with a top of 20px or so and see if it shows up then.
Good Luck!
UPDATE
Hang on a tick there. your .lang div is inside the [ul] element so is actually incorrectly positioned, since the only element allowed as a child of a [ul] is a [li].
Why not try taking this div out of the list and have it instead, just outside, as a child of the #top_menu element....?
That might work!
Not sure if this is relevant to your situation, but some versions of IE will throw away empty divs; if the div doesn't contain anything, adding something like will force it to exist.
I'm trying to create a menu, in which the last menu item (with different class) will stick automatically to the right corner of the menu. I'm attaching a screenshot for this. There are a few menu items on the left and the last item should somehow count the rest of the available space on the right in the menu div, add this space as padding to the right and display a background in whole area ON HOVER (see the screen to understand this please)
Is something like this possible?
Thanks a lot
See if this will work for you: http://jsfiddle.net/neSxe/2
It relies on the fact that non-floated elements get pushed out of the way of floated elements, so by simply not floating it the last element fill up the rest of the space.
HTML
<ul id="menu">
<li>Services</li>
<li>Doctors</li>
<li>Hospitals</li>
<li>Roasted Chicken</li>
<li class="last">Customer Service</li>
</ul>
CSS
#menu {
width: 600px;
}
#menu li {
float: left;
}
#menu li a {
display: block;
padding: 6px 14px 7px;
color: #fefefe;
background-color: #333;
float: left;
}
#menu li a:hover {
background-color: #666;
}
#menu li.last {
float: none;
}
#menu li.last a {
text-align: center;
float: none;
}
Edit
I've made some changes to make it work smoother on IE6, by floating the anchors too.
If anybody else needs this and do not need to support IE6 and below, you can get rid of those two properties.
assuming your html looks like this:
<div id="menu">
<div class="entry">Services</div>
...
<div class="entry last">Support Staff</div>
</div>
I would make the #menu position: relative;, so that you can position the last menu entry absolute inside the #menu div.
Not necessarily putting the menu item last, but if you always wanted that rounded corner at the end then you could apply a background image to the ul itself and position that right top with the curve. The only issue you'd run into with this method is, if you hover over the last menu it will not put a hover right to the right-hand edge.
If you knew how many menu items there were you could achieve this by setting the correct widths for all your menu items?
Have a look at this:
http://jsfiddle.net/ExLdQ/
The trick is to use your lighter green as the background or background-image for the whole list. You can than use the darker green on all li's and add a background-color:transparent to li.last.
Just add float: right; to your css for the last menu item, and use light background for both the list itself and the last menu item.
I've coded myself into a CSS corner. I have a list of images that I display next to each other using an unordered list. The unordered list is placed inside a fixed width div, so that each 3 images, the next 3 images will display on the next "row".
Each li in the ul does not just display the image, it displays all kinds of stuff, like so:
<div id="colmain">
<ul class="imagelist">
<li>
<h2>Image title</h2>
<img src="" />
<p>Description</p>
</li>
</ul>
</div>
This works fine in most browsers, except for IE7. IE7 display the images beneath each other instead of next to each other. I know from the classic horizontal menu bar technique that this can be fixed by setting the float to left for the li. This does not work for my situation, because I do not know the height of each li, it depends on content. Wit different heights for each li, some very strange layout situations occur, for example an image sitting on the right of an empty row. Here's a stripped version of my CSS:
.imagelist { border-collapse:collapse; font-size:9px; width:850px; }
.imagelist li { display:inline-block; list-style-type: none; max-width:240px; vertical-align:top; }
.imagelist li a { display:inline-block; position:relative; }
.imagelist li a img, { padding:0; margin:0; position:relative; }
Basically, I just want IE7 to listen to me and respect the inline-block statement, which SHOULD display elements next to each other.
Through a bit of smarter Googling I managed to find this entry:
http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html
zoom:1; and *display: inline; solve this issue. God I hate IE with a passion.