Center twitter bootstrap navigation items - html

I'm trying to center my navigation items, what do I need to edit in order to do so? I've looked in the bootstrap.css file and can't find where to change the settings. I can't figure out how to do it I've been trying everything.
<div id="nav" class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>Forum</li>
<li>Download</li>
<li>Play Now</li>
<li>Register</li>
<li class="dropdown">
<a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Login
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<!-- login form -->
<form action="http://www.07-pk.com/forum/login.php" method="post" onsubmit="md5hash(vb_login_password,vb_login_md5password,vb_login_md5password_utf)">
<script type="text/javascript" src="http://www.07-pk.com/forum/clientscript/vbulletin_md5.js"></script>
Username: <input type="text" class="button" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="1" value="Username" onfocus="if (this.value == 'Username') this.value = '';" />
<br />
Password: <input type="password" class="button" name="vb_login_password" size="10" accesskey="p" tabindex="2" />
<input type="submit" class="button" value="Login" tabindex="4" title="" accesskey="s" />
<input type="hidden" name="s" value="" />
<input type="hidden" name="do" value="login" />
<input type="hidden" name="forceredirect" value="1" />
<input type="hidden" name="vb_login_md5password" />
<input type="hidden" name="vb_login_md5password_utf" />
<input type="hidden" name="url" value="http://www.07-pk.com" />
</form>
<!-- / login form -->
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

Twitter Bootstrap navigation items are having float: left by default. Consider adding the following styles to your own CSS file (or modify the bootstrap.css, which I would not recommend):
.navbar .nav li {
width: 100px; /* or whatever width you want for items */
display: inline-block;
float: none;
}
.navbar .nav {
float: none;
text-align: center;
}
Fiddle example

Wrap your objects you want to center with this <div>
<div style="width:300px; margin: 0 auto;">
//your code here
</div>

Brandon Himpfen give an example of this on his blog. http://www.himpfen.com/center-align-bootstrap-nav-pills/ "In Twitter Bootstrap there are navigation (nav) pills and by default, it is left aligned. We can wrap the navigation with a HTML div element and add a bit of CSS."
http://www.bootply.com/AiyCfTCcBV
/* CSS used here will be applied after bootstrap.css */
.centered-pills {
text-align: center;
}
.centered-pills ul.nav-pills {
display: inline-block;
}
.centered-pills li {
display: inline;
}
.centered-pills a {
float: left;
}
* html .centered-pills ul.nav-pills, *+html .centered-pills ul.nav-pills {
display: inline;
}
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<a class="navbar-brand pull-left" href="#">Brand</a>
<div class="centered-pills">
<ul class="nav nav-pills">
<li>Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
<a class="navbar-brand pull-right" href="#">Brand</a>
</div>
</div>
</nav>

Related

Change the position of a button to up

I have a header with a logo a dropdown menu and a search bar the problem is that dropdown button it's down and I want it to up.
I have this way:
But I want something like this where button is align with the logo and search bar:
I have tried a lot of things like call the class of button in css and put margin-button with a lot of pxls but its work, any suggestion?
This is my code HTMl where I have the button:
<header>
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<a class="navbar-left" href="#"><img src="assets/img/logo-01.png" style="max-width:70px"/></a>
<div class="navbar-header navbar-left">
<button type ="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse-1">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<div class="cd-dropdown-wrapper">
<button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle cd-dropdown-trigger">Categorias</button>
<nav class="cd-dropdown">
Close
<ul class="cd-dropdown-content">
<li class="has-children">
Eletrodomésticos
<ul class="cd-secondary-dropdown is-hidden">
<li class="go-back">Menu</li>
<li class="see-all">Todos os eletrodomésticos</li>
<li class="has-children">
Eletrodomésticos
<ul class="is-hidden">
<li class="go-back">Eletrodomésticos</li>
<li class="see-all">Todos os eletrodomésticos</li>
<!--<li class="has-children">-->
<li>Grandes Eletro de cozinha</li>
....<!--(has other categories but it doesnt matter for here so I skip that part)-->
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Pesquisar Produto">
</div>
<button type="submit" class="btn btn-danger">
<i class="glyphicon glyphicon-search"></i>
</button>
</form>
</div>
</div>
</div>
</nav>
</header>
This is my css code:
.btn-default {
margin-bottom: 350px;
background: #25727D;
border-color: #25727D;
position: absolute;
margin-left: 50px;
}
.btn-default {
margin-bottom:350px;
background: #25727D;
border-color: #25727D;
position:absolute;
margin-left:50px;
}
Since .btn-default already have position:absolute, just change top:10px or top:desiredValue accordingly to change vertical position of button.

z-index issue in chrome only

I keep getting the same issue when attacking the problem in the method offered on various sites.
Q.How can i set the nav to a z-index of 1000 to appear above all other elements in the site?
I have tried position: absolute & relative' within the fixed div.
I need the nav to be fixed, and expand as bootstrap does but i need the whole nav at any time to appear above anything else.
The nav
<div id='nav_container' class='fixed_nav'>
<div id='nav_div' class=''>
<nav id='navbarnav' class="navbar navbar-default admin_nav_bar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img class='brand_image' src='assets/images/logo-1-small.png' alt='' /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pills">
<li class="active home-pill"><a href="#home" id='home_button'>Home</a></li>
<li class='vids-pill'>Vids</li>
</ul>
<!--
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
-->
<ul class="nav navbar-nav navbar-right pills">
<!--
<li class='login_button'>
<a href='#signin' type="button" class="btn btn-default navbar-btn nav_btn_pad" style='line-height: 0.1;'>Sign in</a>
</li>
<li class='register_button'>
<a href='#register' type="button" class="btn btn-default navbar-btn nav_btn_pad" style='line-height: 0.1;'>Register</a>
</li>
-->
<li class="dropdown">
New <b class="caret"></b>
<ul class="dropdown-menu">
<li class="divider"></li>
<li>Video</li>
<li>Picture</li>
<li>Music</li>
<li class="divider"></li>
</ul>
</li>
<li class='user_button admin-pill'>
<a href='#admin' type="button" class="btn btn-default navbar-btn nav_btn_pad" style='line-height: 0.1;'>Admin</a>
</li>
<li class='user_button myaccount-pill'>
<a href='#myaccount' type="button" class="btn btn-default navbar-btn nav_btn_pad" style='line-height: 0.1;'><? echo $_SESSION['userName']; ?></a>
</li>
<li class='logout_button'>
<a href='http://www.xxxxxxx.co/home/bin/logout/logout.php' type="button" id='logout_button' class="btn btn-default navbar-btn nav_btn_pad" style='line-height: 0.1;'>Logout</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>
The Body of which i wish to appear below but in chrome is appearing above the nav
<div class='container'>
<h3>
New Video
</h3>
<hr />
<div id='new_vid_form' class='' style='position: relative; z-index: 0;'>
<div class="input-group marg_5">
<span class="input-group-addon">Article Title</span>
<input id='new_vid_form_title' type="text" class="form-control" placeholder="Article Title">
<span class="input-group-addon">
<span id="new_vid_form_title_status" class="glyphicon glyphicon-asterisk orange pointer status_box" title="Required field"></span>
</span>
</div>
<div class="input-group marg_5">
<span class="input-group-addon">Short Desc.</span>
<input id="new_vid_form_shortDesc_status" type="text" class="form-control" placeholder="Short Description">
<span class="input-group-addon">
<span id="new_vid_form_shortDesc_status" class="glyphicon glyphicon-asterisk orange pointer status_box" title="Required field"></span>
</span>
</div>
<hr />
<div class="input-group marg_5">
<span class="input-group-addon">Youtube ID</span>
<input id="new_vid_form_youtubeID_status" type="text" class="form-control" placeholder="Youtube Video ID | watch?v=' this bit ' ">
<span class="input-group-addon">
<span id="new_vid_form_youtubeID_status" class="glyphicon glyphicon-asterisk orange pointer status_box" title="Required field"></span>
</span>
</div>
<hr />
<textarea id="new_vid_form_longDesc" class="input-large text_area_fw" placeholder='Long Description'></textarea>
</input>
<hr />
<div class="input-group marg_5">
<span class="input-group-addon">Tags</span>
<input id="new_vid_form_tags" type="text" class="form-control" placeholder="Tags (No more than 10) seperated by comma">
<span class="input-group-addon">
<span id="new_vid_form_tags_status" class="glyphicon glyphicon-asterisk orange pointer status_box" title="Required field"></span>
</span>
</div>
<hr />
<button class='btn btn-default'>Add video</button>
</div>
</div>
The associated CSS
.fixed_nav {
width: 100%;
position: fixed;
top:0;
}
#nav_div {
z-index: 10000;
}
I use the bootstrap Navbar with headroom.js to make it move up & down. I have to set the z-index in the css for the style i used .navbar-fixed-bottom, works for top as well this way , this achives fixed & the z-index, no need to create separate styles, yours are probabaly being overridden you can check in chrome dev tools, in your bootstrap css file look for and .navbar-fixed-top, .navbar-fixed-bottom, then add z-index: 1030; I can't imagine why I used 1030, just needs to be a big enuff to be more than the total amount of elements of the page whatever yours is.
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
HTML
<div class="navbar-fixed-bottom">
<ul>
<li>
...
</li>
</ul>
</div>
Possibly way off track, but in your HTML markup your navbar has the id nav_div, but your CSS selector is targeting #navdiv (no underscore)

Change bootstrap nav style to remove the padding right below a nav?

I can't get rid of a padding styled to a bootstrap nav.
I have the following relevant markup for my nav:
<nav id="menu" class="navbar navbar-default" role="navigation">
And I've tried:
.navbar-default {
padding-bottom: -20px;
padding-top: -10px;
}
And also:
#menu {
padding-bottom: -20px;
}
This is how its being displayed:
So I want the blue div displayed right below the nav with any padding.
How can I get it?
This is my whole html for nav and div below:
<nav id="menu" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../index.html">Inicio</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Aproximación de Taylor</li>
<li class="dropdown">
Aproximación de raíces<b class="caret"></b>
<ul class="dropdown-menu">
<li>Bisección</li>
<li>Newton Raphson</li>
<li>Secante</li>
<li class="divider"></li>
<li>Iteración de Punto Fijo</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div id="argumentos" class="form-actions">
<input list="funciones" type="text" autofocus placeholder="Función" id="fx">
<datalist id="funciones">
<option value="x**3+4*x**2-10">
<option value="x**3-x-1">
<option value="e**(x)+2**(-x)+2*cos(x)-6">
<option value="e**(x)-x**2+3*x-2">
<option value="(4*x-7)/(x-2)**2">
</datalist>
<input type="text" placeholder="a" id="a" style="width: 50px;">
<input type="text" class="input-medium" placeholder="b" id="b" style="width: 50px;">
<input type="text" class="input-medium" placeholder="tolerancia "id="tolerancia" style="width: 75px;">
<input type="text" class="input-medium" placeholder="Iteraciones máximas" id="iteracionesMaximas" style="width: 140px;">
<input type="text" class="input-medium" placeholder="Visión en a" id="a-vision" style="width: 75px;">
<input type="text" class="input-medium" placeholder="Visión en b" id="b-vision" style="width: 75px;">
<button id="ok" class="btn btn-success">Graficar</button>
</div>
.navbar {
margin-bottom: 0px;
}
Its because of margin not the padding. Simply write in your css:
.navbar {margin-bottom:0px;}
Demo

Remove additional space between image and div

How can I remove the additional space between the nav banner and the main banner image below it?
I removed the padding and margin, but nothing is working.
My code is below.
I don't want to set positions. Can anyone tell me what the problem is?
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#" style="padding-top: 0px;">
<img alt="change" class="defieLogo" src="http://www.defie.co/designerImages/defie_logo_only.png">
</a>
<div class="nav-collapse collapse" style="height: 0px;">
<ul class="nav">
<li class="active">Product</li>
<li>Solutions</li>
<li>Services</li>
<li class="iphonePartnerLink">Partners</li>
<li class="iphoneContactLink">Contact</li>
</ul>
<ul class="nav" id="navSecond">
<li class="">Partners</li>
<li>Contact</li>
</ul>
<form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Email">
<input class="span2" type="password" placeholder="Password">
<button type="submit" class="btn">Sign in</button>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<header class="hero-unit-product">
<h1>
Defie Cloud Business Solutions
<small>.. changing the way businesses operate.</small>
</h1>
<p><a class="btn btn-green btn-large" href="/signup/" data-link="modal" data-target="#signup-modal">Register</a></p>
</header>
</div>
The space is coming from:
.home article.container {
margin-top: 30px;
}
Change it to:
.home article.container {
margin-top: 0;
}
The main problem is connected with <article class="container"> element - it has margin-top: 30px;.
You also have to change padding-top for .home selector. It's set to 55px now, but has to be 47px instead.

nav bar does not show up in ie9

I am not able to see my top nav bar in ie9 browsers....
its showing in my local machine...
but its not showing up in the server can you please say how to fix it....
not working here
providing my code below
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container" style="width: 1153px;">
<a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="http://v2.defie.co/" style="padding-top: 0px;">
<img alt="change" class="defieLogo" src="http://www.defie.co/designerImages/defie_logo_only.png">
</a>
<div class="nav-collapse collapse" style="height: 0px;">
<ul class="nav" style="padding-left: 312px;">
<li class="active">Product</li>
<li>Solutions</li>
<li>Services</li>
<li class="iphonePartnerLink">Partners</li>
<li class="iphoneContactLink">Contact</li>
</ul>
<ul class="nav" id="navSecond">
<li class="">Partners</li>
<li>Contact</li>
</ul>
<!--<form method="post" class="navbar-form pull-right" action="http://intra.defie.co/Account/">
<input class="span2" type="text" name="email" placeholder="Email">
<input class="span2" type="password" name="password" placeholder="Password">
<button type="submit" class="btn">Sign in</button>
</form>-->
Login
SIGN UP
</div><!--/.nav-collapse -->
</div>
</div>
</div>
In bootstrap.css you have a Microsoft Filter there by default, you need to look at the .navbar-inner selector in your CSS and remove this:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333',endcolorstr='#222222',GradientType=0)
Its a black gradient being shown over your menu, just remove that from your bootstrap.css file and the nav menu will appear as expected.