Bom dia,
Coloquei um menu inferior no site em desenvolvimento, e nele ao acionar as ofertas abre um pop UP com os produtos em carrossel, está com dois bugs que não consegui ajustar… @Leonardo_Vicentini_F consegue me ajudar??
Bug primeira imagem em branco, depois de acionar o slide aparece normal…
Bud imagens estão passando na frente do contêiner
www.bemii.com.br
Conseguiu ajustar? …
Achei o bug, a estrutura ta toda em html?
Tá em js e css também… consegue me ajudar??
Para resolver o problema de aparecer na frente do conteiner, troca esse código la no CSS
Esse:
#wrap-carroussel > div > div.bx-viewport {
overflow: inherit!important;
}
Por esse:
#wrap-carroussel > div > div.bx-viewport {
overflow: hidden !important;
height: auto !important;
}
Vou ver a questão da primeira imagem em branco
Top demais 
essa parte deu certo 
Testa esse código aqui pra ver se vai resolver a primeira imagem branca
Troca la no css os códigos:
footer nav ul {
display: flex;
padding: 0;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
}
.caixa {
display: none;
color: #333;
margin-top: 10px;
position: absolute;
top: -680px;
margin-right: auto;
margin-left: 50%;
transform: translateX(-58%);
background-color: #ffffff;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px rgb(0 0 0 / 50%);
width: 80%;
height: auto;
border: 1px solid #444;
}
Aqui resolveu
Top deu certo também…
Muito obrigado!!!
Boa tarde,
@O_Zara consegue me ajudar??
Quero colocar o contador como a foto abaixo, somente na categoria “Ofertas” no desktop…tentei alterar os seletores mas sem sucesso.
Ta tentando usar qual função pra mover ele?
Essa…
$(function(){
$('.allclockdiv').after('.#corpo .menu.lateral');
});
Trocar .after por .insertAfter
@Leonardo_Vicentini_F Sabe me dizer como que inicia o querySelectorAll aqui na Loja Integrada?
Usei essa função pra quando eu clicar no botão rotacionar os ícones porém só rotacionar o primeiro elemento que ele encontra, acredito que tem que usar o querySelectorAll mais não to conseguindo ativar ele aqui
/*HTML*/
<div id="cubo"><button type="button" onclick="giro()" id="iconrot"><svg id="giraricon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="backpack-Navigation-module-qnFSZG-Navigation-trigger-chevron"><path d="M1.20889 5.45047L9.55333 11.4167C9.82 11.6076 10.1811 11.6087 10.4478 11.4188L18.7933 5.49629C19.2967 5.13847 20 5.49192 20 6.10174V9.38974C20 9.62974 19.8833 9.85447 19.6844 9.9952L10.4456 16.5527C10.18 16.7414 9.82111 16.7414 9.55444 16.5527L0.315556 9.9952C0.117778 9.85447 0 9.62974 0 9.38974V6.05483C0 5.44283 0.705556 5.09047 1.20889 5.45047"></path></svg></button></div>
/*JAVA SCRIPT*/
function giro() {
document.getElementById("giraricon").classList.toggle('giro');
}
Crie uma pagina extra e coloque o codigo para eu poder analisar o comportamento.
/*HTML*/
<div id="cubo"><button type="button" onclick="giro()" id="iconrot"><svg id="giraricon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="backpack-Navigation-module-qnFSZG-Navigation-trigger-chevron"><path d="M1.20889 5.45047L9.55333 11.4167C9.82 11.6076 10.1811 11.6087 10.4478 11.4188L18.7933 5.49629C19.2967 5.13847 20 5.49192 20 6.10174V9.38974C20 9.62974 19.8833 9.85447 19.6844 9.9952L10.4456 16.5527C10.18 16.7414 9.82111 16.7414 9.55444 16.5527L0.315556 9.9952C0.117778 9.85447 0 9.62974 0 9.38974V6.05483C0 5.44283 0.705556 5.09047 1.20889 5.45047"></path></svg></button></div>
<div id="cubo"><button type="button" onclick="giro()" id="iconrot"><svg id="giraricon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="backpack-Navigation-module-qnFSZG-Navigation-trigger-chevron"><path d="M1.20889 5.45047L9.55333 11.4167C9.82 11.6076 10.1811 11.6087 10.4478 11.4188L18.7933 5.49629C19.2967 5.13847 20 5.49192 20 6.10174V9.38974C20 9.62974 19.8833 9.85447 19.6844 9.9952L10.4456 16.5527C10.18 16.7414 9.82111 16.7414 9.55444 16.5527L0.315556 9.9952C0.117778 9.85447 0 9.62974 0 9.38974V6.05483C0 5.44283 0.705556 5.09047 1.20889 5.45047"></path></svg></button></div>
<style>
button#iconrot {
background: none;
}
div#cubo {
width: 100%;
}
button#iconrot {
width: 100%;
display: flex;
justify-content: flex-end;
}
svg#giraricon {
width: 30px;
fill: #565454;
height: 17px;
transform: rotate(270deg);
}
/*para fazer animação de rotacionar*/
.giro {
transform: rotate(0deg) !important;
}
</style>
<script>
function giro() {
document.getElementById("giraricon").classList.toggle('giro');
}
</script>
Por exemplo, nessa estrutura ai, o primeiro ícone rotacionar ao clicar nele, mais quando clico no segundo ele rotaciona o primeiro ícone e não o segundo
Bom, se for usar a propriedade id, precisa garantir que seja único, é uma má prática repetir id.
Vc precisa usar o this dentro do evento click (no caso dentro da função) para pegar exatamente qual objeto deve ser alterado pos foi dele o evento disparado.
Existe uma forma melhor com querySelectorAll? pra fazer todos os elemntos com o mesmo id rotacionar ao ser clicado?
Entendo que vc rotacionar somente o que foi clicado, então use o this, agora se vc quer rotacionar todos, pode usar o querySelectorAll passando uma class (ou conjunto) que quer buscar.