Staff
Índice
Conectarse
Registrarse
Últimas imágenes
) y bueno, la verdad es que me propuse hace poco hacer mi propio skin y comenzar a meterme en esto de los codes ya que tengo un proyecto que va tomando forma, sin embargo, al intentar hacer el tutorial de personalización de header (Este de aquí) peero, cuando intenté por primera vez todo quedó bien y bonito, pero no quería que estuviera igual que el tuto, así que me puse a editar los links y las transiciones y fue ahí cuando la barra me salía como en una lista seguida en vertical y no en horizontal como la vista tradicional 
. Justo... así:[spoiler=imagen]https://i.imgur.com/pgc8ChF.png[/img]
Ya probé a intentar hacerlo desde cero, achicar dimensiones, pero nada, ¿podrían darme una ayudadita con esto por favor?
Aquí dejo los codes que estoy utilizando uwu
//El HTML
- Código:
<ul class="linklist navlinks{NAVBAR_BORDERLESS}">
<li><a class="mainmenu link" href="/">Índice</a>
<a class="mainmenu link" href="/">Buscados</a>
<a class="mainmenu link" href="/">Perfil</a>
<a class="mainmenu link" href="/">Mensajes</a>
<a class="mainmenu link" href="/">Conectarse</a>
<a class="mainmenu link" href="/">Desconectarse</a></li>
</ul>
// El Css
- Código:
ul.navlinks {
background-color: #b30000;
border-bottom: 2px solid #000000;
font-weight: 100px;
position: fixed;
left: 0;
top: 0;
padding: 5px 0;
text-align: center;
width: 100%;
z-index: 9999!important;
}
a.mainmenu {
color: #000000;
font-family: 'Cute Font', sans-serif;
text-decoration: none;
font-size: 9px;
line-height: 1.8;
display:block!important;
margin: 5px auto;
width: 100px;
position: relative;
overflow: hidden;
padding: 2px;
text-transform: uppercase;
transition: color .3s cubic-bezier(0.11, 0.7, 0, 1);
}
a.mainmenu:hover {
color:#CF2034; transition: 0.2s
}
.link {
position: relative;
z-index: 1;
padding:1px 3px;
}
.link:after {
position: absolute;
top:0; bottom: 0;
right: 0; left: 0;
display: block;
background-color: #9b5c5c;
content: "";
transform: translate3d(100%,0,0);
z-index:-1;
}
.link:hover:after {
transform: translate3d(-98%,0,0);
transition: transform 1.1s cubic-bezier(0.41, 0.9, 0, 1);
}
.link:hover{
color: #fff!important;
}
Espero no sea algo muy complicado, y de antemano, muchísimas gracias por pasar por este tema de dudas que suenan tontas (?)
Espero que te sirva!
