Categorias: CSS

Colocar barra entre os itens de menu

Escrito por Amanda de Lavra

7 de julho de 2021

O plugin Divi Booster tem a opção de adicionar barras verticais entre os itens do menu, porém não faz sentido usar o plugin só para isso caso não vá usar outras opções disponíveis. Nesse caso, é só adicionar um código CSS simples para incluir as barras verticais. Esse é o código para o módulo Menu, não para o menu padrão do Divi.

.et_pb_menu .et-menu.nav li + li a:before {
	position: absolute;
	left: -0.8em;
	transform: translateX(-50%);
	content: '|';
	font-size: smaller;
}
Atualização em 26/08/2021:

Com o código acima, ocorre um problema se o menu contém sub-menu, pois aparecem barras verticais antes de cada item do sub-menu. As bandeiras em site multilingual também ficam com barras entre elas. Para contornar isso, é necessário acrescentar o seguinte código:

/*Cabeçalho - Sem barras verticais no sub-menu e nas bandeiras de idiomas*/
.et_pb_menu .et-menu.nav ul.sub-menu li a:before, .et_pb_menu .et-menu.nav li.lang-item a:before {
	content: none;
}

Posts relacionados

Customizações da página de login e painel administrativo do WordPress

Customizações da página de login e painel administrativo do WordPress

Para todo o site que eu faço, personalizo a página de login e também o wp-admin para ficar com a marca do cliente. Recentemente, aperfeiçoei o código para que o login ficasse no meio da página, tanto verticalmente quanto horizontalmente. Segue código usado aqui neste...

Botão Leia Mais no Elementor

Botão Leia Mais no Elementor

O site do cliente tinham alguns textos que eram muito extensos e, num layout de coluna, variavam muito de tamanho. Decidi adaptar o que já havia feito no Divi, ao incluir um botão Leia Mais (https://blog.amandadelavra.com.br/modulo-texto-com-botao-leia-mais/), mas...

Como manter a proporção de um elemento com CSS

Como manter a proporção de um elemento com CSS

Me pediram para colocar um elemento flutuante no site com o preço de cada produto. Como os preços variam de acordo com o produto, eu não podia ajustar com padding apenas para que ficasse redondinho na proporção 1:1. Para isso, usei a propriedade do CSS aspect-ratio....