galera, como faço para deixar o meu menu igual a da imagem? preciso que o menu fique centralizado com o logo no meio.
segue código…
.navbar {
background: #001c7d;
margin-bottom:0;
min-height:70px;
}
.nav img{
padding:10px;
border-radius: 50%;
margin-bottom:-20px;
height:140px;
}
.navbar {
background: #001c7d;
margin-bottom:0;
min-height:70px;
}
.navbar-fixed-top {
min-height:60px;
height:60px;
padding-top:0;
}
.navbar-inner {
background: #001c7d;
border-radius:0;
filter: none;
border: none;
box-shadow: none;
}
.navbar .brand img {
width:120px;
height:40px;
}
.navbar .nav > li > a {
text-transform:uppercase;
line-height: auto;
vertical-align: middle;
margin:10px 3px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
border: none;
box-shadow: none;
font-size:15px;
text-shadow: none;
color: #fff;
transition: border-color 1s ease;
}
.navbar .nav > li:hover> a, .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
border: none;
color: #fff;
font-weight:bold;
background-color: #001c7d;
transition: border-color 1s ease;
}
.nav-pills {
margin-bottom: 30px;
}
.nav-pills > li > a {
background: transparent;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin-right:5px;
padding-left:25px;
padding-right:25px;
border: 1px solid #181A1C;
}
.nav-pills > li > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover, .nav-pills > .active > a:focus {
background: #181A1C;
color: #fff;
}
.navbar .btn-navbar:hover, .navbar .btn-navbar {
border-radius:0;
background:#FECE1A;
color: #000;
}
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- <a href="#" class="brand">
<img src="images/logo.png" width="120" height="40" alt="Logo" />
</a>-->
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<i class="icon-menu"></i>
</button>
<div class="nav-collapse collapse pull-right">
<ul class="nav" id="top-navigation">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#portfolio" class="btnCor">Serviços</a></li>
<li><a href="#about" class="btnCor">Produtos</a></li>
<td class="menu-logo"><img src="images/logo_inteltek_redonda.png" ></td>
<li style="display:none"><a href="#clients" class="btnCor">Clientes</a></li>
<li><a href="#service" class="btnCor" >Empresa</a></li>
<li><a href="#contact" class="btnCor">Contato</a></li>
</ul>
</div>
</div>
</div>
</div>