Como alterar a altura ou tamanho do menu superior?

Pedro · Dezembro 31, 2017, 6:06pm

@wesley_schultz a logo você pode aumentar com este código:

/* Tamanho da Logo */ 
.logo img {max-height: 90% !important;}

É só colar no editar CSS, o tamanho você altera em max-height.

A segunda solicitação parece que você já solucionou, acessei o seu site e vi que o cabeçalho está branco.

wesley_schultz · Dezembro 31, 2017, 8:03pm

Obrigado Pedro, o "max-height " (teria que por por exemplo “1200 px”) ?

gostaria de deixar o Plano de fundo para o cabeçalho, igual a esta, sera que tem como ? existe codigo html ou css pra isso ? procurei em tudo nao achei

ass

Pedro · Janeiro 2, 2018, 1:03am

Eu te aconselho a ir fazendo testes com o "max-height " e vê qual fica melhor na sua loja. O meu o máximo foi 90.

Pedro · Janeiro 2, 2018, 1:11am

Para o cabeçalho vê se este código abaixo te ajuda. Para mudar a cor de fundo, vá em visual da loja e escolha uma cor de sua preferência para o background do cabeçalho. Cola no editar CSS.
Esse código foi postado pelo Caio Cesar Pedrosa no grupo do Facebook.

/* Cabeçalho */
@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: 50% !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:#666!important;
}

.barra-inicial {
position:absolute;
top:0;
left:0;
width:100%;
background:rgba(0,0,0,.1)!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:none;
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:uppercase;
font-size:8pt!important;
color:#fff;
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:#fff
}

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

#cabecalho .conteiner .acoes-conta a {
text-transform:uppercase;
color:#fff;
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:#fff
}

#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:6px;
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:#fff;
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:#444;
font-size:10pt;
text-transform:uppercase
}

#cabecalho .conteiner .menu.superior ul.nivel-um ul.nivel-dois {
position:absolute;
top:100%
}
}

wesley_schultz · Janeiro 2, 2018, 2:52pm

Deuu muito certo obrigado mesmo

Pedro · Janeiro 2, 2018, 5:54pm

Que, fico feliz que tenha funcionado.

Oka_Interiores · Janeiro 11, 2018, 2:29am

Alguém poderia me ajudar?
Gostaria de alterar a cor da fonte das categorias do menu ao passar o mouse.
Como está neste site https://www.supriflex.com.br/.

Alessandra_Lopes · Janeiro 26, 2018, 5:42pm

Gostaria de aproximar a barra do meu do meu full banner, tem um espaço. como faço? ah=alguém pode me ajudar?
https://alesandalias.lojaintegrada.com.br/

Pedro · Janeiro 26, 2018, 6:35pm

@Alessandra_Lopes tenta esse código abaixo:

/* deixa menu perto do full banner */

#cabecalho > .conteiner {
margin-bottom: 0;
padding-bottom: 0;
}
.secao-banners>.conteiner {
margin-top: 0;
padding-top: 0;
}
.secao-banners .flexslider {
padding-top: 0;
margin-top: 0;
border: 0 none;
}

Alessandra_Lopes · Janeiro 26, 2018, 6:41pm

Oi Pedro,
Este eu coloco no editar CCS ou no incluir HTML?

Alessandra_Lopes · Janeiro 26, 2018, 6:50pm

Pedro, não deu certo em nenhum dos dois…

criativecup · Fevereiro 22, 2018, 4:48am

Olá Amigos ,

Alguem consegue me ajudar a tirar essa linha entre o cabeçalho e o banner para parecer ser uma arte por inteira , para juntar os dois e ficar sem espaço.

https://nortshop-manutencao.lojaintegrada.com.br/

arthurromero · Fevereiro 24, 2018, 2:49am

como aumento o tamanho dos meus anuncios e faço a expansão para ficar igual desse site? (www.reidosconcursos.net)

arthurromero · Fevereiro 24, 2018, 2:54am

ARRUMEI O CÓDIGO PARA VOCê

CAMINHO CSS
TODAS AS PÁGINAS

#cabecalho > .conteiner {
margin-bottom: 0;
padding-bottom: 0;
}
.secao-banners> .conteiner {
margin-top: 0;
padding-top: 0;
}
.secao-banners .flexslider {
padding-top: 0;
margin-top: 0;
border: 0 none;
}

Shopotes · Julho 17, 2018, 8:12pm

@kapicases você descobriu como coloca as imagens nos botões?
Passa o código ae!!!

Sheila81 · Julho 17, 2018, 9:09pm

Pedro, voce sabe como posso fazer para deixar o menu superior em uma linha so? E que ficou uma categoria embaixo e com isso aumento o tamanho do menu superior alargando ele, entao eu gostaria que ele ficasse mais fino e que todos os itens ficassem todos em uma linha so. tem como? Se puder me ajudar eu agradeço, obrigada

kapicases · Julho 20, 2018, 2:29pm

Bom dia Pessoal.

Conseguimos inserir a imagem depois de contratar uma empresa parceira personalização da loja. Fizemos a personalização com o pessoal da Visualyze.

Ivanilson_Gomes · Julho 20, 2018, 2:45pm

Não sou o @Pedro, mas poderia passar o link da loja?! Caso ainda não tenha resolvido.

Desde já, obrigado!

Sheila81 · Julho 20, 2018, 2:58pm

Oi Ivan, bom dia, obrigada pela ajuda. Ainda na resolvi, se puder me ajudar eu agradeço. Segue www.vendasbrasilsr.com.br tem como o menu superior ficar em uma linha so? Sem ficar muito pequeno as subcategorias? Aguardo ajuda, obrigada.

Ivanilson_Gomes · Julho 20, 2018, 6:52pm

Vê se isso te serve, @Sheila81 !

div.menu.superior {
    display: flex;
    width: 100%;
    height: 48px;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

div.menu.superior ul.nivel-um li{
    padding: 0px 8px !important;
}

div.menu.superior .nivel-um .titulo {
    flex: 1;
    padding: auto;
    margin: auto;
    font-size: 100%;
}

.menu.superior .nivel-dois {
    top: auto;
}

Infelizmente não tem como colocar sem reduzir o texto… mas isso foi o que pude fazer, daqui…
Espero que resolva! att!

Tópico		Respostas	Visualizações
Personalização no menu superior Layout	1	410	18 de Agosto de 2020
Alterar altura do menu superior Código CSS/HTML	0	156	20 de Junho de 2023
Centralizar menu superior, adicionar Tarja via código e eliminar espaçamentos > Tema Google Código CSS/HTML	29	746	17 de Outubro de 2022
Menu superior Paginas Extras Layout	9	221	12 de Agosto de 2021
Menu superior css Layout	1	336	20 de Maio de 2020

Como alterar a altura ou tamanho do menu superior?

Tópicos relacionados