Como funciona este menu?

Detalhes da questão

Endereço do fórum: http://www.vidadeaquarista.com
Versão do fórum: PhpBB3

Descrição

Olá a todos!

Colegas, gostaria de saber como funciona este tipo de menu usado neste fórum? http://olimpiadaenem.forumeiros.com/

Olá!

Qual menu? Pode mostrar uma imagem?

Hancki

Olá @Hancki

Seria o utilizado neste fórum aqui http://olimpiadaenem.forumeiros.com/

Segue a imagem, o menu seria essa faixa preta (Portal, Inicio etc...)
https://2img.net/h/s20.postimg.cc/nyvqay330/menu.jpg

O menu usado nesse fórum é um menu sem imagens, apenas com texto. Aqueles ícones são adicionados posteriormente com recurso a CSS. Aliás, todo o menu é feito com CSS para ter essa aparência. Relativamente simples.

Hancki

Olá amigo!
Adicione esse código css em sua folha de estilo css:

Código:

.navbar {
        background: #2D3134!important;
        border: none!important;
        margin: -5px 0px 0!important;
}
a.mainmenu {
    background: url(http://i18.servimg.com/u/f18/18/45/41/65/nav10.png) repeat-x 0 45px;
    color: #FFF;
    display: inline-block;
    font-family: "Trebuchet MS", Arial, Verdana, Sans-serif;
    font-size: 13px;
    font-weight: 700;
    height: 45px;
    line-height: 45px;
    padding: 0 12px;
    transition: 250ms;
}
#page-header a.mainmenu.fa_navactif, #page-header a.mainmenu:hover {
    background-position: 0 40px;
}
#page-footer, div.navbar, div.navbar ul.linklist {
    display: block !important;
}
ul.navlinks {
    border-bottom: transparent!Important;
}
div.navbar {
height: 51px!important;
}

OBS: Retire as Imagens que você possui em:

Painel de Controle -> Visualização -> Imagens e Cores -> Gestão das Imagens -> Modo avançado

e nessa aba que você irá estar (Geral/Navegacação) você altera as imagens do indice ... etc; Caso queira que tenha Imagem na frente do texto.

Lembrando que pra ter Imagem + Texto tem que acessar:

Painel de Controle -> Visualização -> Pagina Inicial -> Cabeçalho & Navegação

e em "Exibir apenas as imagens no menu de navegação" : Deixe NÃO!

Atenciosamente,
While.

Spoiler:

no meu fica assim, teria como arrumar, ou seja deixar o anuncio mais para baixo, e mais para cima... rsrs, para que fique centralizado...

Olá Vinicius, sua duvida não tem nada haver com esse tópico, aconselho criar um novo tópico pra conseguir suporte em sua duvida

Atenciosamente,
While.

while escreveu:Olá amigo!
Adicione esse código css em sua folha de estilo css:

Código:

.navbar {
        background: #2D3134!important;
        border: none!important;
        margin: -5px 0px 0!important;
}
a.mainmenu {
    background: url(http://i18.servimg.com/u/f18/18/45/41/65/nav10.png) repeat-x 0 45px;
    color: #FFF;
    display: inline-block;
    font-family: "Trebuchet MS", Arial, Verdana, Sans-serif;
    font-size: 13px;
    font-weight: 700;
    height: 45px;
    line-height: 45px;
    padding: 0 12px;
    transition: 250ms;
}
#page-header a.mainmenu.fa_navactif, #page-header a.mainmenu:hover {
    background-position: 0 40px;
}
#page-footer, div.navbar, div.navbar ul.linklist {
    display: block !important;
}
ul.navlinks {
    border-bottom: transparent!Important;
}
div.navbar {
height: 51px!important;
}

OBS: Retire as Imagens que você possui em:

Painel de Controle -> Visualização -> Imagens e Cores -> Gestão das Imagens -> Modo avançado

e nessa aba que você irá estar (Geral/Navegacação) você altera as imagens do indice ... etc; Caso queira que tenha Imagem na frente do texto.

Lembrando que pra ter Imagem + Texto tem que acessar:

Painel de Controle -> Visualização -> Pagina Inicial -> Cabeçalho & Navegação

e em "Exibir apenas as imagens no menu de navegação" : Deixe NÃO!

Atenciosamente,
While.

Eu gostaria que tivesse aquela faixa preta também, e o menu ficou apagado!

Olá Uatyla! Desculpe pelo resultado... com as imagens realmente complicou, mas agora ficou melhor, troque o código pra este:

Código:

div.navbar {
    height: 52px!important;
}
.navbar {
    background: #2D3134!important;
    border: none!important;
    margin: -5px 0 0!important;
        clear: both;
    padding: 0 10px;
}
#page-footer, div.navbar, div.navbar ul.linklist {
    display: block !important;
}
ul.navlinks {
    border-bottom: transparent!important;
}
ul.linklist li {
    display: inline;
    font-size: 1.1em;
    line-height: 2.2em;
    list-style-type: none;
    width: auto;
}
a.mainmenu {
    background: url(http://i18.servimg.com/u/f18/18/45/41/65/nav10.png) repeat-x 0 45px;
    color: #FFF;
    display: inline-block;
    font-family: "Trebuchet MS", Arial, Verdana, Sans-serif;
    font-size: 13px;
    font-weight: 700;
    height: 45px;
    line-height: 45px;
    opacity: 1;
    padding: 0 12px;
    transition: 250ms;
    margin-top:-20px;
}
#page-header a.mainmenu.fa_navactif, #page-header a.mainmenu:hover {
    background-position: 0 40px;
}
.navbar span.corners-bottom, .navbar span.corners-top, .panel span.corners-bottom, .panel span.corners-top, .post span.corners-bottom, .post span.corners-top{
    margin:0px 125%;
}


OBS: No TOPO da sua folha de estilo css! para evitar erros.

Atenciosamente,
While.

a fonte continua transparente!

Olá, adicione mais esse código no TOPO da sua folha de estilo css:

agora é sem erro.

Código:

#page-header .navbar {background: #2D3134!important;}

Atenciosamente,
While.

continua a mesma coisa! =/

Olá, pode passar sua Folha de estilo pra que eu altere ao senhor.

Atenciosamente,
White.

Enviei por MP

Boa noite.

Procure por este CSS:

Código:

#page-header .navbar {
    background: #E0FFFF !important;
}

E substitua-o por este:

Código:

#page-header .navbar {
  background: rgb(45, 49, 52) none repeat scroll 0% 0%;
}

Olá, CSS foi mandado via Mp com as alterações, caso o código de nosso amigo Mateus não resolva.

Atenciosamente,
While.

Opaa agora funcionou! *-*

só mais uma dúvida, eu não queria que aparecesse no menu. Calendário, buscar por exemplo, o que eu faço para tira?

Olá amigo!
Isto e outra dúvida, peço que crie um novo tópico, pra podermos te ajudar.

Visto que esse tópico era só pra modificar a aparência de seu menu.

Atenciosamente,
While.

Ok! Obrigado!