Como centralizar o logo junto a barra de busca, trazer mais para direta

Maxima_Protection · Março 4, 2022, 11:20pm

Olá

Alguém consegue me ajudar a ajustar o logo? quero ele centralizado junto à barra de busca e um pouco mais para direito. Já tentei diversos códigos e não consegui.

Espero que consigam me ajudar!!

ExactMarketing · Março 5, 2022, 2:08am

Olá, tudo bem?

Pelo que vi, o seu topo do site tem várias coisas a serem ajustadas… confira também em outras resoluções… veja um exemplo de como fica em 1366px

É melhor começar pela revisão das resoluções… pode ser que encontre outros problemas
Até mesmo em smartphones e tablets…
Veja:
chrome_AHqfEebWAv

Caso precise de auxílio com essas questões ainda, podemos te ajudar.
Envie para nosso whatsapp todas as sua solicitações/alterações ou qualquer evolução no seu tema que montamos uma proposta para você e agendamos as modificações o quanto antes

Nosso whatsapp é: 51 982616621

Abraço e boas vendas!

Exact Marketing

✆ 051 98261-6621

✉ contato@exactmarketing.com.br

https://exactmarketing.com.br/

cassio.cadu · Março 5, 2022, 5:11pm

Olá, sua loja realmente está toda desconfigurada, os elementos do cabeçalho não estão responsivos, você consegue copiar e salvar os códigos que colocou no CSS? Se conseguir vou fazer uma coisa aqui pra você, se não gostar é só apagar e voltar o seu código e a gente trabalha o cabeçalho aí. Pode ser? Assim que salvar seus códigos me avisa que te passo o código.

Maxima_Protection · Março 5, 2022, 7:13pm

Olá Cássio,

Muito obrigada pela ajuda, já salvei o códigos CSS que coloquei, pode me enviar o código por favor?

Vi seu site e achei muitooo bom!

@cassio.cadu

cassio.cadu · Março 6, 2022, 4:10pm

Olá, estava fazendo uns banners aqui, demorou mais que o esperado. Muda as cores predominantes no visual da loja para #000000 depois apaga seu CSS e coloca este, caso não goste do resultado pode voltar os anteriores sem problema.

@media only screen and (max-width: 767px){
a.atalho-menu.icon-th:before {
content: "Menu";
margin:0px
}

.busca {
margin: 0 75px 0 0;
padding: 0;
border: none;
background: none;
}
}

@media only screen and (max-width: 479px){
    #rodape .institucional .titulo, 
    .span4.links-rodape.links-rodape-categorias, 
    .span4.sobre-loja-rodape,
    .span4.links-rodape.links-rodape-paginas,
    .institucional.fundo-secundario .span12.visible-phone {
        text-align: center;
    }
}

@media screen and (max-width: 767px){
ul.flex-direction-nav {
display: none;
}
}

@media only screen and (max-width: 1140px){
#cabecalho .conteudo-topo .inferior .span8 {
width: 60% !important;
}
}

@media only screen and (max-width: 767px){
#cabecalho .conteudo-topo .inferior .span8 {
width: initial !important;
}
}

@media only screen and (max-width: 979px){
#cabecalho .acoes-conta > li > i {
display: block;
width: auto
}

#cabecalho .conteiner .superior .span4 {
width: 149px !important;
}

#cabecalho .conteiner .superior .span4 a {
position: absolute;
right: 15px;
top: 16px
}
}

@media only screen and (max-width: 900px){
#cabecalho .menu.superior > .nivel-um > li {
padding: 0 10px !important;
}
}

@media only screen and (max-width: 950px){
#cabecalho .conteudo-topo .inferior .span8 {
width: 100% !important;
}
}

@media only screen and (max-width: 794px){
#cabecalho .menu.superior > .nivel-um > li > a > strong {
font-size: 9pt !important;
}
}

@media only screen and (min-width: 768px){
#cabecalho .conteiner .menu.superior > ul.nivel-um > li:hover strong,#cabecalho .conteiner .acoes-conta i,#cabecalho .conteiner .acoes-conta a,#cabecalho .carrinho strong.qtd-carrinho,#cabecalho .conteiner .busca button{
color:#010000!important;
}

.barra-inicial {
position: absolute;
top:0;
left:0;
width:100%;
background:#000000!important;
z-index:9
}

.barra-inicial .conteiner .lista-redes {
width:auto;
float:right
}

.barra-inicial .conteiner .lista-redes li {
border:none;
margin-left:5px
}

.barra-inicial .conteiner .lista-redes li i {
font-size:15pt;
background: #000000;
color:#fff
}

.barra-inicial .conteiner .canais-contato {
float:left;
width:auto;
margin:0
}

.barra-inicial .conteiner .canais-contato>ul>li {
border:none
}

.barra-inicial .conteiner .canais-contato li a {
color:#fff
}

.barra-inicial .conteiner .canais-contato li span {
color:#fff
}

#cabecalho {
position:relative;
}

#cabecalho .conteiner {
padding-top:30px;
box-shadow:none;
background:none;
padding-bottom:50px
}

#cabecalho .conteiner > .row-fluid {
position:relative;
}

#cabecalho .conteiner .conteudo-topo {
position:absolute;
right:0;
top:50%;
margin-top:-38px
}

#cabecalho .conteiner .conteudo-topo .superior.row-fluid {
padding:0 0 3px
}

#cabecalho .conteiner .bem-vindo {
text-transform:none;
font-size:10pt!important;
color:#ffffff;
font-weight:700
}

#cabecalho .conteiner .bem-vindo span {
color:rgba(0,0,0,.6);
font-weight:700
}

#cabecalho .conteiner .acoes-conta > li:first-child {
display:none
}

#cabecalho .conteiner .superior .span4 {
width:auto;
position:absolute;
bottom:0;
right:110px;
margin:0;
padding-right:12px;
border-radius:6px;
background:#ff7e07
}

#cabecalho .conteiner .acoes-conta > li {
display:inline-block;
vertical-align:middle
}

#cabecalho .conteiner .acoes-conta a {
text-transform:none;
color:#ffffff ! important;
position:relative;
bottom:4px
}

#cabecalho .conteiner .acoes-conta i {
padding:0;
width:50px;
height:auto;
line-height:50px;
font-size:19pt;
margin:0;
background:none;
color:#ffffff ! important;
}

#cabecalho .conteiner .span8.busca-mobile {
margin:0
}

#cabecalho .conteiner .busca {
padding:0;
border:none;
background:none
}

#cabecalho .conteiner .busca input {
width:100%;
padding:0;
height:50px;
box-shadow:none;
border:none;
border-radius:15px;
text-indent:15px
}

#cabecalho .conteiner .busca button {
position:absolute;
border:none;
top:0;
right:0;
height:100%;
border-radius:0 50px 50px 0;
padding:0 15px;
font-size:17pt;
background:none;
}

#cabecalho .span4.hidden-phone {
position:absolute;
margin:0;
right:0;
width:auto;
bottom:0
}

#cabecalho .carrinho {
border-left:1px solid rgba(0,0,0,.12);
padding-left:12px;
border-top:none;
border-right:none;
border-bottom:none
}

#cabecalho .carrinho i.fundo-principal {
font-size:30pt;
background:none;
margin-right:25px;
padding:0;
width:50px;
line-height:50px;
height:auto;
opacity:1
}

#cabecalho .carrinho strong.qtd-carrinho {
position:absolute;
display:block!important;
margin:0;
right:0;
width:20px;
line-height:20px;
font-size:12pt;
top:calc(50% - 10px);
text-align:center;
background:#ffffff;
border-radius:100%
}

#cabecalho .carrinho > a > span {
display:none
}

#barraTopo .carrinho-interno,#cabecalho .carrinho-interno {
position:absolute;
top:100%
}

#cabecalho .conteiner .menu.superior {
position:absolute;
bottom:-1px;
left:0;
width:100%;
background:#fff;
border-bottom:1px solid rgba(0,0,0,.2)
}

#cabecalho .conteiner .menu.superior > ul.nivel-um {
text-align:center;
max-width:1140px;
padding:0 20px;
margin:0 auto
}

#cabecalho .conteiner .menu.superior ul.nivel-um>li {
float:initial;
border:none;
display:inline-block;
margin-top:initial
}

#cabecalho .conteiner .menu.superior ul.nivel-um li strong {
color:#ff7e07;
font-size:12pt;
text-transform:uppercase
}

#cabecalho .conteiner .menu.superior ul.nivel-um ul.nivel-dois {
position:absolute;
top:100%
}
}
#cabecalho .conteiner {
    background: #ff7e07;
}
#cabecalho .menu.superior {
background-color: #000000 !important;
}
.menu.superior .titulo{
color: #FFFFFF !important;
}
.pagamento-selos {
background: none;
background-color: #fff;
}
#cabecalho .conteiner {
  max-width: 100vw;
}
#corpo .conteiner {
  max-width: 100vw;
}
.secao-banners .conteiner {
    max-width: 100%;
}
.conteiner {
max-width: none;
margin: 0 auto;
padding: 0 20px;
}
.banner.tarja {
text-align: center;
}
a.botao.botao-comprar.principal {
    border-radius: 10px;
    background-color: #008000;
}
.flexslider {border-radius:20px;}
#rodape .institucional, #rodape .pagamento-selos {
background-image: url();
}
.pagamento-selos {background-color: #fff; background-position: top center; background-repeat: 
   repeat;background:inherit;} #rodape .titulo    {color:#fff;}
   .menu.superior .nivel-um > li:hover {background-color: #ff7e07; }
.listagem .listagem-linha li{border:none}
.listagem .listagem-linha {border:none}
.listagem .titulo-categoria:hover {
  background-color: white;
}

@media only screen and (max-width: 767px) {
.menu.superior .nivel-dois li a, .menu.lateral .nivel-dois li a {
font-size: 14px;
color: white;
}
}

#rodape .titulo {
color: #ff7e07;
}

#rodape .redes-sociais {
    background: none;
    box-shadow: none;
}

cassio.cadu · Março 7, 2022, 2:53pm

Olá @Maxima_Protection , testou o código? Lembrou de trocar a cor secundaria e principal para #000000 ou outra que seja escura?

Maxima_Protection · Março 7, 2022, 3:40pm

Olá @cassio.cadu, tudo bem?

Muito obrigada, está sendo de grandeee ajuda, oque está fazendo. Troquei a cor secundária e principal, alterei o css aqui e ficou assim…

Acredito que o cabeçalho ficou assim por conta do menu que está em 2 linhas.

Não querendo me aproveitar, mas já aproveitando a ajuda, consegue me dar um help com mais algumas alterações?

Se sim, posso manda-las por aqui, ou tem algum numero que posso falar com você?

cassio.cadu · Março 7, 2022, 3:52pm

Vou te enviar meu zap no privado, mas era pra ter ficado assim…

https://comictoys.lojaintegrada.com.br/

Tópico		Respostas	Visualizações
Como centralizar barra de pesquisa Layout	5	1417	27 de Agosto de 2021
Logo no Cabeçalho maior e centralizado Layout	6	1458	17 de Janeiro de 2022
Incluir cabeçalho, whatsApp, Fone, Rastrear pedido Layout	4	536	9 de Julho de 2020
Busca Mobile [Desconfigurado] Layout	11	2152	13 de Janeiro de 2022
Erro Com Logo da loja Layout	6	519	13 de Abril de 2022

Como centralizar o logo junto a barra de busca, trazer mais para direta

Tópicos relacionados