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.