I want to centralize the tab's items and the style to be the same, but I cannot modify my css currently.
I want the tab element to takes 100% width(to be stretched) and the li elements to be at the center of the tab element.
<div class="row">
<div class="col-lg-12 centered-tabs">
<ul class="nav nav-tabs">
<li class="active">Women</li>
<li>Men</li>
</ul>
</div>
</div>
Thanks,
B.
The navbar links are set to float: left by default, you need to reset it to float: none so that text-align: center will have the necessary effect.
Also display: block on the list elements make them stack vertically. Set them to display: inline-block
.centered-tabs {
text-align: center;
}
.centered-tabs .nav-tabs > li {
float: none !important; /* Avoid !important, added for SO snippet priority */
}
.centered-tabs .nav > li {
display: inline-block !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<div class="row">
<div class="col-lg-12 centered-tabs">
<ul class="nav nav-tabs">
<li class="active">Women
</li>
<li>Men
</li>
</ul>
</div>
</div>
Related
I have this in my html:
<div>
<ul id="tabs">
<li id="h1">
Home
<div>
text here
</div>
</li>
<li id="h2">
Services
<div>
text here
</div>
</li>
</ul>
</div>
What I want to do is make the list items inline, while hiding their contents. And the contents would only be visible when I press the list item link. This is what I've tried so far on the css:
li {
display: inline;
}
li div {
display: none;
}
li:target {
display: block;
}
However, this doest not work. The display: block; is not overriding the display: none;
Thanks in advance!
li:target only refers to the li element itself that is targeted. Setting that li’s display property to block will not affect the containing div which display property is set to none. In fact, it will only overwrite the display: inline that’s defined on li.
When you want to display the div that’s inside the targeted li element, then you need to adjust the selector to actually match that div. For example using li:target div to match the specificity of the original rule:
li {
display: inline;
}
li div {
display: none;
}
li:target div {
display: block;
}
<div>
<ul id="tabs">
<li id="h1">
Home
<div>
text here
</div>
</li>
<li id="h2">
Services
<div>
text here 2
</div>
</li>
</ul>
</div>
I'm trying to build a simple drilldown in Bootstrap. When the user selects a "row", I want the background color to change to indicate what "row" is selected. It only works like I want it on the first level rows.
Here's the basic HTML:
<div class="container">
<ul class="nav nav-drilldown" id="Menu">
<li>
Thing the first
<ul class="collapse" id="a">
<li>child 1</li>
<ul class="collapse" id="a-child-1">
<li>
<div class="row">
<div class="col-md-6">something</div>
<div class="col-md-3">goes</div>
<div class="col-md-3">here</div>
</div>
</li>
</ul>
</ul>
</li>
</ul>
</div>
And the CSS:
.nav-drilldown:focus {
background-color: #eee;
}
.nav-drilldown li li a:focus {
background-color: #FF0000;
}
.nav-drilldown li a:focus {
background-color: #eee;
}
For the second level, on the text part of the anchor changes background color. I get that you can't set selected on a <li>, but i don't understand why the second level doesn't behave like the first level. I can't get the third level to much of anything.
Level 1:
Level 2:
JSFiddle
I believe this is just a matter of the padding on the anchor tag. At the top level, you have 10px top and bottom padding and on the second level anchor tag, you have no padding. So, if you want similar behavior, you could add:
.nav-drilldown li li a {
padding: 10px 15px;
}
`<ul id="main-nav">
<li>
Menu item
<div class="sub-nav">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -80px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -160px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -240px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -320px;">
<p>Anything</p>
</div>
</li>
`
I want to be able to put content into the div (Links, Images, Text, etc). I am trying to make the div box the same size as the navigation bar its self specifically 1050px in width (I want the navigation bar and div box to be 1050px in width). When a user hovers over a link in the navigation bar I want the div box to appear with all its content inside.
this is something like it: http://jsfiddle.net/ELyQW/2/ ~ (But if you look closely you can see the box moves on every new link which I do not want to happen.)
Look at the navigation bar on this website for similar reference. pacsun.
Thank You SO much for your help!
And if you do help me create a new bar I strongly recommend you do not use the jsfiddle I posted, but if you have to go for it!
Thank you once again!
Yay success!
http://jsfiddle.net/hjZz9/1/
<div id="main-menu-container">
<ul id="main-menu">
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
</ul>
</div>
#main-menu-container {
position: relative;
}
#main-menu {
margin: 0; padding: 0;
list-style: none;
}
#main-menu li {
float: left;
margin-right: 15px;
}
#main-menu li:hover .sub-menu {
display: block;
}
.sub-menu {
display: none;
position: absolute;
left: 0; right: 0;
padding: 10px;
background-color: #eee;
}
Edit: I've added right: 0; to .sub-menu just so it stretches from end to end, you can change this to your own preference of course.
You could try position fixed instead of absolute. Then left position both the div and ul correctly and you will achieve it. Here is a sample
.sub-nav {display: none; position: fixed; left: 40px; width: 400px; z-index: 999; background: #f2f2f2;}
I am currently working with a bottom navigation bar for a test site. The problem is that the navigation bar does not center properly. I have added the .left attribute to keep each block list beside each other. How can I get this bottom navigation bar to center automatically(no matter the amount of lists added)? Example
CSS related to bottom navigation
<style>
.bottomnavControls {
padding-top:10px;
padding-bottom:10px;
padding-right:0;
text-decoration:none;
list-style:none;
}
#footer {
position: absolute;
width: 100%;
bottom: 0;
background: #7a7a7a;
border-bottom: 15px solid #000;
}
.left {
float: left;
}
.right {
float: right;
}
</style>
HTML
<div id="footer">
<div class="bottomNav">
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Home</b></li>
<li>Login</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Category</b></li>
<li>Games</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>About</b></li>
<li>Who We Are</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Links</b></li>
<li>Google</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Other Stuff</b></li>
<li>Stuff</li>
</ul>
</div>
</div>
My current Bottom navigation:
My desired outcome:
Instead of float, you should use display: inline-block here. This way, you can easily center them by putting text-align: center on the container.
.bottomNav { text-align: center; }
.bottomnavControls { display: inline-block; }
and remove left class.
Note: display: inline-block works fine in modern browsers, but it needs a hack in IE7.
Suppose we have the following markup for navigation bar using Twitter Bootstrap 2.0.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner pull-center">
<ul class="nav">
<li class="active">HOME</li>
<li>CONTACT</li>
</ul>
</div>
</div>
What is the best way to center .nav inside navbar-inner?
I only came up with adding my own CSS styles:
#media (min-width: 980px) {
.pull-center {
text-align: center;
}
.pull-center > .nav {
float:none;
display:inline-block;
*display: inline; *zoom: 1;
height: 32px;
}
}
Override the width of the container within the navbar from auto to 960px.
.navbar-inner .container {width:960px;}
To align it in the center with a dynamic width, I used the following:
HTML:
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
....
</ul>
</div>
</div>
CSS:
.navbar .navbar-inner {
text-align: center;
}
.navbar .navbar-inner .nav {
float: none;
display:inline-block;
}
Didn't test it, but I guess only display:inline-block; could be a problem, which is supported in all browsers except for IE7 and lower..
http://caniuse.com/inline-block
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Just using the container class as per http://twitter.github.com/bootstrap/components.html#navbar is centering my nav; however, it is fixed width and the formatting is off (the height of the nav bar is increased and its very possible something I'm doing wrong).
It would be nice to have the nav centered in a fluid, percentage-based width, with a minimum width, based on some minimum supported device screen size, and nowrap. (I'm a newbie wrt the responsive media queries and perhaps that is the better alternative to percentage based.)
Still investigating the minimum width and nowrap, but another alternative to the bootstrap container class fixed width is to add a child of the navbar-inner. I would like to know if there is a built-in bootstrap solution such as the row-fluid and spanN classes, but I haven't been able to get that formatted correctly within the nav either.
<div style="margin-left: 15%; margin-right: 15%;">
I have found this useful and clean:
<div class="navbar navbar-fixed-top">
<div class="container">
<ul class="nav">
<li class="active">HOME</li>
<li>CONTACT</li>
</ul>
</div>
</div>
where, css is:
.container {left:auto;right:auto}
This will center the div on the base of the width of your current navbar.
Responsiveness is managed apart.