Personalizar menu

Detalhes da dúvida

Versão do fórum : PunBB
Nível de acesso : Fundador
Navegador usado : Mozilla Firefox
Imagem :

Imagem da minha dúvida:

Membros afetados : Todos os membros do fórum
Endereço do fórum : http://teste98.forumeiros.com

Descrição do problema

Olá!

gostaria do efeito da imagem no menu do meu fórum, o efeito esta no site da Forumeiros.

Link de onde vi https://www.forumeiros.com/#tab-1

Até mais!

Saudações,

Aceda à sua Folha de Estilo CSS:
Painel de Controle Visualização Imagens e Cores Cores Folha de Estilo CSS
Código:

Código:

a.mainmenu {
-webkit-transform: translateZ(0);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
border-bottom: 0px solid rgba(255, 255, 255, 0.6);
padding-bottom: 10px;
margin-top: 0;
color: white;
}

Coloque no inicio de teu CSS.

Até mais.

Olá!

ficou legal, quero mais uma alteração, que a barra vermelha do hover aparecesse na parte de baixo do menu.
http://prntscr.com/6ho1ve
Até mais!

Olá!

Adicione mais este CSS:

Código:

#pun-navlinks a:hover {
      border-top: 0px!important;
      border-bottom: 3px solid red !important;
}
#pun-navlinks {
    padding-bottom: 10px !important;
}

Resultado: http://prntscr.com/6hofzd

Hancki

Olá!

o senhor poderia deixar tipo a imagem? alargar o hover um pouco (pouca coisa) e deixar a barra vermelha daquele tipo da imagem abaixo, e na parte marcada em amarelo deixar por completo em cima o hover.
Imagem: http://prntscr.com/6hor49
Espero que entenda.... Até mais!

Então use apenas este trecho do código que já tinha dado:

Código:

#pun-navlinks a:hover {
      border-top: 0px!important;
      border-bottom: 3px solid red !important;
}

Hancki

Olá!

a parte do hover marcada por amarelo quero que fique por inteira.

Até mais!

Agora entendi

Use mais este:

Código:

#pun-navlinks a {
        padding-top: 18px !important;
}

Resultado: http://prntscr.com/6hoyx9

Hancki

Olá!


Sim ficou perfeito, mas meio estranho ficou meu menu, poderia adicionar figamos uma pequena linha no meio dos menus ali? ex: http://prntscr.com/6hp075
Ah, e destacar um pouco mais a letra, tipo Assim
Até mais!

Com mais este código fica bem bonito até!

Código:

#pun-navlinks a {
        font-weight: bold;
        margin-left: 20px !important;
}
#pun-navlinks li {
        border-right: 1px solid white;
        padding-bottom: 8px !important;
}

Resultado: http://prntscr.com/6hpeg8

Hancki

Olá!

aqui não ficou muito perfeito, o menu ficou mais para a esquerda das barras, teria como deixar ele centralizado nas barras, e o hover inteiro?

Pode mostrar por print como deseja? É mais fácil!

Assim: http://prntscr.com/6hpkcl
o hover do menu por inteiro como na imagem acima, e o texto dos menus centralizado no seu local.

Não consegui fazer com que o fundo ficasse totalmente preenchido até à borda... mas consegui centrar!

Código:

#pun-navlinks li a.mainmenu {
        margin-left: 20px !important;
}

Resultado:


Hancki

Utilizei um código para retirar alguns menus, e deu erro, pode arrumar? http://prntscr.com/6hqk8n

Saudações!

Adicione o código abaixo no INICIO de teu CSS, creio que terá que retirar o outro que esta com a função hover:

Vá em: Painel de controle   Visualização   Cores "Aba" Folha CSS.

Adicione no conteúdo:

Código:

#pun-navlinks li:hover {border-bottom: 3px solid #1582C6!important;background: #525151!important;padding-bottom: 19px!important;padding-top: 13px!important;position: relative!important;
}

Salve e Visualize seu fórum.
Melhores cumprimentos,
Sennior.

Quando eu passo o mouse ele não apresenta o hover, mas quando eu clico no hover ele aparece deste modo, http://prntscr.com/6i3fo3

Olá!

Vi que parece corrigido: http://prntscr.com/6i3ook
Já não quer mais nenhuma modificação?

Hancki

Não amigo, nada resolvido, veja aqui o mouse esta fora do link lá http://prntscr.com/6i3r1w e aqui ele esta em cima, eu gostaria que ele ficasse todo como esta imagem http://prntscr.com/6i3r5e.

Espero que entenda... é meio confuso mesmo..

Até!

Será assim: http://prntscr.com/6i3vxc ?
Se sim, remova o código dado acima pelo Sennior e coloque este:

Código:

#pun-navlinks li a.mainmenu {
  border: 0px !important;
  background: none !important;
}
#pun-navlinks li:hover {
  cursor:pointer;
  border-left: 1px solid white;
  margin-left: -1px !important;
  background: #525151!important;
  border-bottom: 3px solid red!important;
  padding-bottom: 19px!important;
  padding-top: 13px!important;
  position: relative!important;
}

É isso?

Hancki

Ou então... Pode ir no seu CSSe tirar este código e tentar com o meu...

Código:

#pun-navlinks a:hover {
  background: none repeat scroll 0 0 #4D4D4D;
  border-bottom: 3px solid red!important;
  border-top: 0!important;
  color: #fff!important;
  padding-bottom: 11px!important;
}

Até mais.

não é oque quero...