• Facebook
  • Instagram
[email protected]
Todo Espaço Online
  • Toda Loja
  • Camisetas
    • Bandas
    • Filmes
    • Séries
    • Promoção
    • Só masculinas
    • Só Femininas
  • Canecas
  • Contato
  • Entrar/Criar Conta
  • Pesquisa
  • Menu Menu
  • 0Shopping Cart
Frete Grátis a partir de 150 (regras)
  Primeira troca justa (regras)
Até 12x no cartão
Tabela de medidas
CSS

Posicione o logo entre o menu (ul li) com seletor CSS3 nth-child()

  • Camiseta Olhos de Cigana Oblíqua e Dissimulada Masculina Preta
    Avaliação 5.00 de 5

    Camiseta Olhos de Cigana Oblíqua e Dissimulada Masculina

    R$64,90 R$59,90 -8%
    Ver opções
  • Camiseta O Estranho Mundo de Jack Feminina Preta Capa

    Camiseta O Estranho Mundo de Jack Feminina Preta

    R$64,90 R$61,90 PROMO
    Ver opções
  • Camiseta Netflix Pronto para você - Feminina
    Avaliação 5.00 de 5

    Camiseta Netflix Pronto para você – Feminina

    R$64,90 R$61,90 PROMO
    Ver opções

Provavelmente você já deve ter visto algum site ou blog que tenha o logo no meio dos links do menu. Veja um exemplo:

logo entre os links do menu

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.

7 de julho de 2014/1 Comentário/por Luiz Otávio Miranda
Tags: CSS, CSS3, li, Logo, menu, nth-child, Seletor, ul
Compartilhar isso
  • Share on WhatsApp
https://www.todoespacoonline.com/w/wp-content/uploads/2014/07/logo_no_meio_de_ul_li.jpg 1080 1920 Luiz Otávio Miranda https://www.todoespacoonline.com/w/wp-content/uploads/2015/09/teo-logo1.png Luiz Otávio Miranda2014-07-07 10:01:392016-01-16 02:42:33Posicione o logo entre o menu (ul li) com seletor CSS3 nth-child()

Site seguro

Sua conexão com o TEO é segura do início ao fim com certificado TLS/SSL. Seus dados estão protegidos aqui.

Compra 100% segura!

A empresa Teo Shop

Teo Shop - CNPJ: 24.409.915/0001-13
Desde 17/03/2016
Av Antonio Constantino Barbosa Filho - 21
Mansinho - Boa Esperança - MG
CEP 37170-000

Atendimento - Segunda a Sexta (8h às 18h)
[email protected]

Links úteis ao usuário/cliente

  • Contato
  • Como usar cupons de desconto
  • Política de Troca, devolução e Envio
  • Política de privacidade
  • Tabela de medidas das camisetas
  • Fotos de clientes com camisetas Teo Shop
  • Avaliações de Clientes
  • Receber novidades e promoções por e-mail
  • Reclame aqui

Formas de pagamento

Pagamentos são gerenciados de forma segura pelo MercadoPago, PayPal ou PagSeguro. Você poderá pagar em até 12x no Cartão de Crédito (c/ juros), por Boleto Bancário, ou pelos diversos métodos oferecidos pelas empresas mencionadas. Além da segurança dos seus dados, seu dinheiro também é transferido de forma segura em suas compras conosco.

© Copyright - Todo Espaço Online
  • Facebook
  • Instagram
  • Loja
  • Blog
  • Sobre nós
  • Contato
Voltar ao topo

A teo shop utiliza cookies para melhorar a experiência do usuário. Ao continuar, você concorda com a nossa política de privacidade.


Apenas um alerta!


Todo Espaço Online
Por  GDPR Cookie Compliance
Privacidade

A teo shop utiliza cookies para melhorar a experiência do usuário. Ao continuar, você concorda com a nossa política de privacidade.

Cookies estritamente necessários

O cookie estritamente necessário deve estar sempre ativado para que possamos salvar suas preferências de configuração de cookies.

Se você desabilitar este cookie, não poderemos salvar suas preferências. Isso significa que toda vez que você visitar este site, precisará habilitar ou desabilitar os cookies novamente.