Como colocar a barra de menu na parte superior

Qual é minha questão:
Tipo vi nesse forum uma barra de menu na parte superior e queria implementar no meu forum, a barra é igual a essa no link abaixo.

Links e imagens do meu problema:
Http://pokemonemotion.forums-rpg.com/forum

Endereço do meu fórum:
http://csispecialagents.forumeiros.com

Versão do meu fórum:
PHPBB3

Seja bem-vindo ao nosso fórum de Suporte! Como acabou de se inscrever, veja aqui alguns links importantes a saber: Regras do Fórum, e o que você não deve fazer neste fórum. Os demais fóruns de Suporte Forumeiros Lista de Tutoriais e astúcias e Questões frequentes. Conheça a Staff do Fórum dos Fóruns. Conheça a função Busca.

Olá querido é bem vindo à nossa comunidade!

Para esta função desejada pelo senhor iremos usar um breve código CSS.
Painel de Controle Visualização Imagens e Cores Cores Folha de Estilo CSS

Depois coloque o seguinte código no inicio de teu CSS:

Código:

.linklist.navlinks.borderless {position: relative;top: -284px;background-color: beige;color: white;}

Se o senhor desejar, poderemos fazer igual o fórum que o senhor mostrou

Seu grande amigo,
Mikéé - Ajudeiro.

não funcionou esse código =/

tem como fazer igual essa barra de menu ?
http://iplaygame.forum.st/

Estranho meu código não ter funcionado...

Pois bem, troque o código que eu lhe disse por este:

Código:

#page-footer, div.navbar, div.navbar ul.linklist {
background: url(http://hitskin.com/themes/19/16/11/i_list_bg.png) bottom;
border: 1px solid #2C5787;
left: 0;
position: fixed;
width: 100%;
margin-top: -4px;
}
a.mainmenu {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
background: url(http://i42.servimg.com/u/f42/17/32/13/00/menu-s14.png) no-repeat 40% -10px;
padding-top: 14px;
position: relative;
transition: all .2s linear;
}
a.mainmenu:hover {
background: url(http://i42.servimg.com/u/f42/17/32/13/00/menu-s14.png) 50% 0 no-repeat;
bottom: 5px;
padding-top: 6px;
position: relative;
}

Seu grande amigo,
Mikéé - Ajudeiro.

Esse código deu certo, o problema agora é que a barra não sobe, quando vai uma a outra fik =/

ja tentei alterar aki e só uma q da pra remanejar

aquele Buscar q fika abaixo ta fkando com a cor azul e bagunçando tudo

tem como fazer isso só com a Barra sem o Buscar ir junto ?

Retire o código para me poder montar outro.

Abraços.

já retirei o código

Olá,

Tente este:

Código:

.navbar {
background: url(http://hitskin.com/themes/19/16/11/i_list_bg.png) bottom;
border: 1px solid #2C5787;
position: fixed;
width: 1545px;
text-align: center;
padding: -1px;
margin-top: -285px;
left: 10px;
}
a.mainmenu {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
background: url(http://i42.servimg.com/u/f42/17/32/13/00/menu-s14.png) no-repeat 40% -10px;
padding-top: 14px;
position: relative;
transition: all .2s linear;
}

Deu certo agora, mas tipo, tem como remover aquela barra q tem o Buscar tipo nesse forum q dei de exemplo ?

Consegui retirar com esse código

#search-box {
display: none;
}

agora ficou uma linha branca e nao seu como tirar =/

Olá querido,

Qual barra? Não entendi.

Graciosamente,
Mikéé - Ajudeiro.

se vc puder olhar esse é meu forum

http://csispecialagents.forumeiros.com/forum

tipo quando vou em Login pra acessar o forum e colocar meu login e senha aparece essa barra em cima

https://2img.net/h/oi45.tinypic.com/6pb5g6.png

Olá,

Ainda não compreendi onde está a borda. Mas coloque este código CSS:

Código:

.navbar {border: transparent !important;}

Até mais.

tipo quando vou em Login pra acessar o forum e colocar meu login e senha aparece essa barra em cima

https://2img.net/h/oi45.tinypic.com/6pb5g6.png

Olá!

Substitua o código que você está utilizando por esse:

Código:

#page-header .navbar {
background: url(http://hitskin.com/themes/19/16/11/i_list_bg.png) bottom;
border: 1px solid #2C5787;
position: fixed;
width: 1545px;
text-align: center;
padding: -1px;
margin-top: -285px;
left: 10px;
}
#page-header a.mainmenu {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
background: url(http://i42.servimg.com/u/f42/17/32/13/00/menu-s14.png) no-repeat 40% -10px;
padding-top: 14px;
position: relative;
transition: all .2s linear;
color:white;
}

Até mais.

aeee esse seu certo! não está mais aparecendo a barra la em cima da logiin, agora o problema é outro kkkkkkk sumiu a animação em cima dos icones quando passo o mouse, no caso aquela setinha q ficava em cima quando passava o mouse.

Olá!

Adicione esse código:

Código:

#page-header a.mainmenu:hover {
background: url(http://i42.servimg.com/u/f42/17/32/13/00/menu-s14.png) 50% 0 no-repeat;
bottom: 5px;
position: relative;
}

Caso não funcione adicione esse:

Código:

#page-header a.mainmenu:hover {
background: url(http://i42.servimg.com/u/f42/17/32/13/00/menu-s14.png) 50% 0 no-repeat!important;
bottom: 5px;
position: relative;
}

Até mais.

Pô galera valeu mesmo agora deu tudo certo!

Muito Obrigado a todos que me ajudaram!

Amo vcs !! s2