Provavelmente você já deve ter visto algum site ou blog que tenha o logo no meio dos links do menu. Veja um exemplo:
Se você analisar o código fonte do site indicado acima, vai perceber que eles utilizam três parágrafos (<p>) de cada lado do logo, um para cada link. Também existem classes diferentes para cada lado, os links à esquerda têm o texto alinhado para a esquerda e os links à direita têm o texto alinhado para a direita. Isso indica que, provavelmente, este menu tenha sido criado manualmente, já que os elementos estão posicionados como são exibidos na tela.
O problema aparece quando temos um menu sendo gerado automaticamente por algum sistema (como o do WordPress, por exemplo). Se você não quiser mexer no código PHP e tentar criar uma semântica adequada para o menu (colocar três links de cada lado e o logo no meio), é possível corrigir este erro utilizando somente CSS, nada mais.
Quem entra em cena aqui é o seletor que eu mais adoro no CSS, o Seletor CSS3 nth-child.
Bom, chega de papo e vamos ver na prática como isso funciona.
O HTML do menu gerado pelo CMS
Normalmente, você terá um menu mais ou menos como o indicado abaixo:
<div class="menu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">products</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">item</a></li>
<li><a href="#">support</a></li>
<li><a href="#">about</a></li>
</ul>
</div>Uma lista não ordenada (ul li a).
Porém, a única coisa que você adicionou ali, foi um DIV com a classe menu, a lista em si, foi gerada pelo seu CMS (como o WordPress, por exemplo).
Nesse caso, vamos apenas adicionar um outro DIV com a classe "logo" diretamente após nossa lista:
<div class="menu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">products</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">item</a></li>
<li><a href="#">support</a></li>
<li><a href="#">about</a></li>
</ul>
<div class="logo"></div>
</div>Perfeito, agora temos o HTML que precisávamos, então vamos ao CSS.
O CSS
Vamos, então, configurar o nosso menu normalmente, como faríamos se o logo não fosse estar no meio dos links:
CSS Reset
Se você já possui um CSS Reset, pode pular o trecho de código abaixo:
*{
margin: 0;
padding: 0;
} O menu
A configuração do menu não tem nenhum segredo, é o mesmo que você faria em menus comuns:
.menu{
width: 770px;
height: 66px;
margin: 20px auto;
position: relative;
}
.menu ul{
list-style: none;
}
.menu li{
float: left;
}
.menu li a{
display: block;
padding: 10px 0;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
color: #000;
border-bottom: 1px solid #000;
margin: 10px 10px 0 0;
width:100px;
} Truques com nth-child
Agora é que virão os nossos hacks com o nth-child.
Primeiramente precisamos adicionar o espaço para o logo entre o terceiro e o quarto item da lista. Para isso, o trecho de código abaixo resolve o problema:
.menu li:nth-child(3){
margin-right: 120px;
}Pronto, agora o terceiro li da lista terá 120px de margem para a direita, o que nos dará o espaço que precisamos para nosso logo.
Agora vamos remover a margem da direita do nosso último item da lista:
.menu li:nth-child(6) a{
margin-right: 0;
}Por fim, vamos alinhar o texto dos três links da direita para a direita, para isso, podemos utilizar o nth-child novamente:
.menu li:nth-child(1n+4) a{
text-align: right;
}Nota: Se você não sabe utilizar o seletor nth-child, não deixe de ler este artigo.
Pronto, nosso menu está configurado, agora vamos configurar nosso logo.
O logo
Para o logo, só precisaremos colocar uma posição absoluta em seu CSS e alinhar sua posição com as propriedades top e left (caso não precise, nem se importe com top), veja:
.logo{
width: 100px;
height: 64px;
background-image: url(https://www.todoespacoonline.com/w/wp-content/uploads/2014/07/minha-logo-723x461.png);
background-size: 100px 64px;
position: absolute;
left: 335px;
}E pronto… Não há mais o que fazer se não quiser.
Resultado final
Veja o nosso menu em comparação ao menu do site indicado no início do artigo:
See the Pen Logo in the middle of a List (ul li) using nth-child() (CSS3 Selector) by Luiz Otávio Miranda Figueiredo (@luizomf) on CodePen.
Dependendo do seu navegador, o resultado vai ser perfeito.
Suporte de navegadores
Infelizmente nth-child só é compatível com navegadores mais recentes, como o Internet Explorer 9 e posteriores. Veja aqui quais são os navegadores e versões que suportam este seletor.
O código completo
Para o nosso exemplo, utilizei o seguinte HTML:
<link href='http://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<div class="menu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">products</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">item</a></li>
<li><a href="#">support</a></li>
<li><a href="#">about</a></li>
</ul>
<div class="logo"></div>
</div>
<div class="site">Meu site vem aqui</div>E o seguinte CSS:
*{
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
.menu{
width: 770px;
height: 66px;
margin: 20px auto;
position: relative;
}
.menu ul{
list-style: none;
}
.menu li{
float: left;
}
.menu li a{
display: block;
padding: 10px 0;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
color: #000;
border-bottom: 1px solid #000;
margin: 10px 10px 0 0;
width:100px;
}
/* Add space between the third and fourth "li" to add the logo */
.menu li:nth-child(3){
margin-right: 120px;
}
/* Remove the last margin-right */
.menu li:nth-child(6) a{
margin-right: 0;
}
.menu li:nth-child(1n+4) a{
text-align: right;
}
.logo{
width: 100px;
height: 64px;
background-image: url(https://www.todoespacoonline.com/w/wp-content/uploads/2014/07/minha-logo-723x461.png);
background-size: 100px 64px;
position: absolute;
left: 335px;
}
.site{
text-align: center;
}Só copiar o colar para ver o resultado.
