CSS/HTML - Problema Itens Menu Dropdown

Executer

Executer

Power Member
Boas!

Estou a construir um site em Wordpress para uma organização, mas estou a enfrentar problemas com o menu. Admito que não sou um entendido nesta matéria, embora esteja a aprender, por isso peço desculpa por quaisquer erros/imprecisões que cometa.

O que acontece é que na página que estou a construir, ao passar com o rato em "2.º Ano", os itens que aparecem deveriam aparecer abaixo de "2.º Ano" e não à esquerda (tal como acontece, por exemplo, nesta página ao passar com o rato em "Music" ou "Best Of").

O mais estranho é que isto estava a acontecer como eu queria, mas adicionei um novo item ao menu e isto passou a acontecer. Mesmo após remover esse item, o problema mantém-se, como se vê.

O meu CSS está aqui. Já tentei alterar o float para center, mas não funciona. Comparei o meu CSS com o CSS da página Jonk Music, e não encontrei a causa do problema...

Alguém seria capaz de me ajudar, dar indicações? Obrigado, desde já!
 
Primeiro: a tua class big-menu (ou algo do género) tem um background que podes retirar (assim já fica sem fundo) e depois precisas de um position para colocar o dropdown, por baixo do 2º ano.

Retira também o width 20% do submenu, fica melhor. Adiciona "left: 400px;"
 
Olá, pmpv, e obrigado pela tua resposta!

O CSS é o padrão do tema e eu nunca criei um CSS tão complexo. Por isso estou um pouco às aranhas.

pmpv disse:
Primeiro: a tua class big-menu (ou algo do género) tem um background que podes retirar (assim já fica sem fundo)
Clicar para expandir...

Done.

pmpv disse:
e depois precisas de um position para colocar o dropdown, por baixo do 2º ano.
Clicar para expandir...

Coloco position: absolute? Onde? Na classe big-menu?

pmpv disse:
Retira também o width 20% do submenu, fica melhor. Adiciona "left: 400px;
Clicar para expandir...

Referes-te a esta parte do código, certo?

Código: 
#cb-nav-bar #cb-main-menu .main-nav li .cb-big-menu .cb-sub-menu {
width: 20%;
border-right: 1px solid #333333;
margin: 0 0 -500px 0;
padding-bottom: 500px;
float: left;

Update:

Enquanto não percebi onde era para adicionar o position, adicionei display: inline-block ao .cb-sub-menu. No big-menu, fiz text-align: center. Removi um float-left. Removi o background e para ajustar a lista a "2.º Ano", adicionei margin: 0 130px -500px 0 em #cb-nav-bar #cb-main-menu .main-nav li .cb-big-menu .cb-sub-menu. Problema: não é responsivo...
 
Última edição:
Enato disse:
Aqui aparece normal pelo menos.. O que não está bom é o logo que estica muito para a direita a página
Clicar para expandir...

Com a solução que apliquei, em ecrãs maiores acontece isto. Não é muito grave, é certo, mas não é muito estético.

Quanto ao problema do logo, não me apercebi de nada. Importas-te de partilhar um screenshot?

Obrigado! :)
 
Resolveste (pelo menos aparenta). Não dei a solução porque infelizmente não tive tempo, mas bom trabalho.

PS: Responsive está nice :003: mas recomendo cortares a imagem que tens no conteúdo, na página "2º ano" - "horários", fica muito pequeno em ecrãs móveis. Corta em 6 (os 4 quadros e o texto) e coloca display: inline-block (pensar em Tablets e Smartphones), width: 100% (nas media queries)

Tenho uma pergunta, porque não consegui perceber, se fizeste um header.html/php, para que não seja necessário carregar sempre o menu e o header. Existe um tópico que ajuda nesse sentido.

Melhora a performance da página. Podes aproveitar que o logo tem muito texto e fazê-lo com código, à excepção do "cérebro amarelo"
 
Última edição:
Apenas acontece com o firefox o logo tão grande.. No chrome e no Edge depois funciona bem. Já no internet explorer é a mesma coisa que o firefox ;)
 
pmpv disse:
Resolveste (pelo menos aparenta). Não dei a solução porque infelizmente não tive tempo, mas bom trabalho.

PS: Responsive está nice :003: mas recomendo cortares a imagem que tens no conteúdo, na página "2º ano" - "horários", fica muito pequeno em ecrãs móveis. Corta em 6 (os 4 quadros e o texto) e coloca display: inline-block (pensar em Tablets e Smartphones), width: 100% (nas media queries)

Tenho uma pergunta, porque não consegui perceber, se fizeste um header.html/php, para que não seja necessário carregar sempre o menu e o header. Existe um tópico que ajuda nesse sentido.

Melhora a performance da página. Podes aproveitar que o logo tem muito texto e fazê-lo com código, à excepção do "cérebro amarelo"
Clicar para expandir...

Obrigado!
Relativamente ao header.html/php, para ser honesto não sei, vou ver isso, porque evitei mexer ao mínimo no padrão do tema.

Enato disse:
Apenas acontece com o firefox o logo tão grande.. No chrome e no Edge depois funciona bem. Já no internet explorer é a mesma coisa que o firefox ;)
Clicar para expandir...

Já reparei. Mas não está resolvido?

Edit: Já reparei que se mantém... Alguém sabe como se poderia resolver? :/
 
Última edição:
Executer disse:
Já reparei. Mas não está resolvido?

Edit: Já reparei que se mantém... Alguém sabe como se poderia resolver? :/
Clicar para expandir...

Aqui já está bom pelo menos :P
Se continuar faz force refresh. Se ainda assim continuar, já apresentaram aqui uma boa solução:
Como o logo tem muito texto, dá para aproveitar e fazer com código e depois meter a imagem ao lado do cérebro ;)
 
Enato disse:
Aqui já está bom pelo menos :P
Se continuar faz force refresh. Se ainda assim continuar, já apresentaram aqui uma boa solução:
Como o logo tem muito texto, dá para aproveitar e fazer com código e depois meter a imagem ao lado do cérebro ;)
Clicar para expandir...

Disse o mesmo sobre o logo.

No Chrome e Dolphin (mobile) está ok e testei no PC e imaculado, também estava ok nos seguintes browsers: Safari, Chrome, Firefox, Opera (imac 24) / Opera, Chrome, Vivaldi, Firefox e Opera (também Edge do Win10).
 
Se calhar ja venho tarde, mas adiciona uma classe a imagem e da-lhe width:100% !important; isto deve parar o firefox de modificar as dimensoes da imagem
 
Inicie sessão ou registe-se para poder participar.
Back
Topo