Boa tarde,
Poderiam me ajudar com um ajuste de layout e referencias em minha página?
Tenho o seguinte site: www.pitangaaromas.com.br, ao abrir, ele não carrega os ícones no topo da página e nem nossas páginas no final
Um outro problema é com a quebra de linhas no Menu, já tentei algumas coisas, mas não consigo diminuir o fonte e até mesmo redimensionar
E um último ponto seria alterar essa cor de fundo branco para a mesma utilizada na tela inteira, como fazer isso?
Teriam alguma dica?
Desde já agradeço.
1 curtida
Teus_G
Julho 29, 2022, 6:23pm
3
Aproveitando, tem um problema com um código CSS que você adicionou. Se você não conseguir arrumar, melhor remover. Ou então tenta buscar o link de importação da fonte e cola no CSS (acredito funcionar).
1 curtida
Muito Obrigado pela ajuda!
Ao usar esse código ele fica com um warning “Use of !important”, esta normal?
1 curtida
Teus_G
Julho 29, 2022, 6:33pm
5
Possível que já tenha outro elemento que antecede, e pede para utilizar o !important. Mas é só salvar mesmo que daí consigo ver o funcionamento na sua loja. Qualquer erro eu conserto aqui na hora.
Teus_G:
/* Redimensionamento: Full menu */
.full.menu .nivel-dois .mega-recebe {
width: 50%;
margin: auto
}
@media only screen and (max-width:767px) {
.menu.superior .nivel-dois {
display: none
}
}
.mega-recebe-prod .listagem li.listagem-linha {
margin: auto
}
@media only screen and (max-width:767px) {
.listagem-linha li {
margin-top: 0
}
}
@media (prefers-color-scheme: dark) {
background-color: green!important;
color: yellow!important;
}
.row-fluid.banner.hidden-phone {
text-align: center;
}
.conteiner-principal .conteiner {
max-width: 100%;
!important;
}
#listagemProdutos {
max-width: 1200px;
margin: auto
}
.banner-center {
width: auto;
height: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 12px 0 26px;
}
@media only screen and (max-width: 767px) {
.banner-center {
display: block;
margin-top: 14px
}
}
.modulo {
margin-left: auto;
margin-right: auto;
text-align: center
}
.menu.superior>ul.nivel-um {
width: fit-content;
margin: auto;
text-align: center
}
.menu.superior .nivel-um>li {
float: none;
display: inline-flex;
border-right: none;
border-left: none
}
.fundo-principal,
.botao.principal,
.menu li:hover>a .fundo-secundario,
.flex-control-paging li a.flex-active,
.dropdown-menu>li>a:hover,
.filtro.lista ul li label:hover,
.menu-simples li a:hover,
.menu-simples li.active a {
background-color: #132651
}
.fundo-secundario {
background-color: #132651;
}
.barra-inicial .canais-contato a,
.barra-inicial .canais-contato i,
.barra-inicial .canais-contato span {
color: white;
}
Outros erros apareceram:
Teus_G
Julho 29, 2022, 6:52pm
7
Ignora o código, fui tentar reaproveitar um da comunidade. Estou fazendo para você, logo envio.
Aproveitando, faz um favor, tira os produtos do modo carrossel.
Teus_G
Julho 29, 2022, 7:08pm
8
Vê se você gosta desse menu!
#menu-open.close .line1 {
transform: rotate(45deg);
top: 25px;
transition: all 0.2s,easy-in-out
}
#menu-open.close .line2 {
opacity: 0;
transition: all 0.2s,easy-in-out
}
#menu-open.close .line3 {
transform: rotate(-45deg);
top: 25px;
transition: all 0.2s,easy-in-out
}
.menu.superior.scrollDown {
opacity: 0;
-webkit-transform: translateY(-70%);
-ms-transform: translateY(-70%);
transform: translateY(-70%);
position: relative;
border-bottom: 0
}
.menu.superior ul.nivel-dois a:after {
display: none!important
}
.menu.superior .all-menu li.com-filho>a:after {
display: none!important
}
.menu.superior li.com-filho>a:after {
content: "\f107";
font-family: Fontawesome;
margin-left: 4px;
position: relative;
line-height: 46px;
opacity: 1;
float: right;
padding-left: 4px;
font-size: 16px;
color: #333;
transform: rotate(0);
display: inline-block;
transition: all .2s
}
.menu.superior {
position: relative;
background: #fff;
border-top: 1px solid #c3c3c357;
border-bottom: 1px solid #c3c3c35c;
margin-top: 0;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out
}
.menu.superior ul.nivel-um {
max-width: 1320px;
margin: auto;
border-radius: 6px
}
.menu.superior .nivel-um {
text-align: center
}
.menu.superior .nivel-um>li {
border: 0;
display: inline-block;
margin: 2px 0;
float: none
}
.menu.superior .nivel-um>li:hover {
margin-top: 0;
border: 0
}
.menu.superior .nivel-dois:hover>li,.menu.superior .nivel-um:hover>li {
opacity: .45;
transition-duration: 0;
transition-delay: .1s
}
.menu.superior .nivel-dois:hover>li:hover,.menu.superior .nivel-um:hover>li:hover {
opacity: 1;
transition-duration: 0;
transition-delay: .15s
}
.menu.superior li a i {
display: none
}
.menu.superior .titulo {
font-weight: 600;
font-size: 15px
}
.menu.superior .nivel-um>li {
color: #fff;
padding: 0 14px;
background: 0 0;
border-radius: 0;
margin: 0;
transition: all .2s ease-in-out!important
}
1 curtida
O Menu ficou lindo eim…
Consigo mudar a cor do menu para o cinza que estava, certo?
1 curtida
Teus_G
Julho 29, 2022, 7:41pm
10
Tem como sim, só localizar .menu.superior { e mudar a cor hexadecimal que está em #FFF para a que quer. Busca no google “cores hexadecimal”. Infelizmente não lembro a cor que tava.
Adiciona esse código também para corrigir a versão mobile que ficou um pouco desalinhada.
@media only screen and (max-width: 767px) {
.menu.superior .nivel-um>li {
display: block;
}
}
1 curtida
Uma última ajuda:
Muito obrigado pela atenção!
1 curtida
Teus_G
Julho 29, 2022, 8:28pm
12
Só escolher a cor em hexadecimal e alterar. Lembre-se de deixar o feedback de resolvido.
.conteiner-principal #rodape .conteiner .fundo-secundario, .fundo-secundario *, .fundo-secundario *:hover, .fundo-secundario:hover, .fundo-secundario.botao:hover {
color: #000000;
}
2 curtidas
Boa tarde eu queria deixar o menu e o rodpé do mesmo tamanho do banner mas nao estou
1 curtida
Teus_G
Agosto 4, 2022, 3:53pm
14
Bom dia! Amigo, se puder abrir um novo tópico eu te ajudo por lá.
1 curtida
como faço isso amigo, não estou conseguindo
consegui, o nome do topico é Diminuir as laterais do menu
