Add icon to center of responsive navbar with twitter bootstrap

Mugbrubre

New Member
We are using http://twitter.github.com/bootstrap/ (although not all resources work). My HTML:\[code\]<div class="navbar"><div class="navbar-inner"> <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> <a id="mainicon" class="visible-phone visible-tablet"> H </a> <div id="righticons"> <a id="searchicon" class="btn btn-navbar"> </a> <a id="phoneicon" class="btn btn-navbar"> </a> </div> <nav id="nav-main" class="nav-collapse" role="navigation"> </nav> </div></div>\[/code\]and then CSS\[code\]#nav-main li,.nav,#nav,#navbar,#nav ul,#nav li,#nav a,#nav li ul a{ margin:0; padding:0; border: none; outline: none; text-transform: uppercase;}.sub-menu a{ text-transform: none !important;}.navbar {background:#7F5011;background: -webkit-linear-gradient(top, #AB7521 0%,#522901 100%);background: -moz-linear-gradient(top, #AB7521 0%,#522901 100%);background: -o-linear-gradient(top, #AB7521 0%,#522901 100%);background: -ms-linear-gradient(top, #AB7521 0%,#522901 100%);background: linear-gradient(top, #AB7521 0%,#522901 100%);-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin: 20px 0px 0px 0px;}.navbar a{padding: 0px 10px;color:#FFF!important;text-decoration:none;text-shadow: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in-out; transition: color .2s ease-in-out; }.nav ul {position:absolute;display:none;top:39px;}.nav ul ul {top:auto;display:none;background: #8f6434;/*background: #7a5429;*/}.nav li ul a{width:10em;height:auto;float:right;top:40px;}.nav li ul ul {left:12.3em;width:auto;margin:0px 0 0 5px;}.nav li ul li ul a{width:12em;height:auto;float:left;}#nav-main li{position:relative;float:left;list-style-type:none;line-height: 2.6em;border-left: 1px solid #AE9064;padding: 0 10px;font-weight: bold;font-size: 15px;}#nav-main .menu-home{ /* fixes left most seperator */ border-left: none;}.nav li:hover ul ul,.nav li:hover ul ul ul, .nav li:hover ul ul ul ul{display:none;}.nav li:hover ul, .nav li li:hover ul, .nav li li li:hover ul, .nav li li li li:hover ul{display:block;border: 1px solid #e6e6e6;border-top: none; background: #7a5429;background: -webkit-linear-gradient(top, #AB7521 0%,#522901 100%);background: -moz-linear-gradient(top, #AB7521 0%,#522901 100%);background: -o-linear-gradient(top, #AB7521 0%,#522901 100%);background: -ms-linear-gradient(top, #AB7521 0%,#522901 100%);background: linear-gradient(top, #AB7521 0%,#522901 100%);}.nav-collapse .nav > li > a:hover,.nav-collapse .dropdown-menu a:hover { background-color: #542A01!important; }.navbar .nav .active > a:hover { text-decoration: none; background-color: #542A01!important; /* override the hover color*/}.navbar .nav .active > a{ background-color:transparent!important; /* override the "here" place holder*/}.navbar .btn-navbar { /*display: none;*/ float: left; padding: 7px 10px; margin-right: 5px; margin-left: 5px; background-color: #2c2c2c; *background-color: #222222; background-image: -ms-linear-gradient(top, #AB7521, #522901); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#AB7521), to(#522901)); background-image: -webkit-linear-gradient(top, #AB7521, #522901); background-image: -o-linear-gradient(top, #AB7521, #522901); background-image: linear-gradient(top, #AB7521, #522901); background-image: -moz-linear-gradient(top, #AB7521, #522901); background-repeat: repeat-x; border-color: #222222 #222222 #000000; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);}.navbar .btn-navbar .icon-bar { display: block; width: 18px; height: 2px; background-color: #FFE8CB; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);}#righticons{ float: right;}#mainicon{ margin-left: auto; margin-right: auto; text-align: center; position: relative;}\[/code\]How do we properly align all 3 elements (menu icon, an image [the H right now], and the right icons).
 
Back
Top