Oi amores!♥
Esse tutorial vai ser um pouco diferente com relação aos demais tutoriais já encontrados (ou não) pra você que queira um menu fixo no topo do blog. Pois bem, este aqui, apenas irá colocar o seu menu (páginas) acima do cabeçalho assim como o meu (mostrado na imagem acima). Ele não terá que adicionar gadget com algum código para que você possa criar um menu. E sim, personalizar, ou melhor explicado, alterar a posição de onde se encontra o seu menu atual, colocando o mesmo no topo. Vamos lá?
Modelo >
Editar html >
Ctrl+F ou
F3 e procure por:
/* Tabs
assim que encontrar, apague todo o código que se encontra em
/* Tabs (abaixo da linha pontilhada)
/* Tabs
----------------------------------------------- */
.tabs-inner {
margin: 1em 0 0;
padding: 0;
}
.tabs-inner .section {
margin: 0;
}
.tabs-inner .widget ul {
padding: 0;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center;
}
.tabs-inner .widget li {
border: none;
}
.tabs-inner .widget li a {
display: inline-block;
padding: 1em 1.5em;
color: $(tabs.text.color);
font: $(tabs.font);
}
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
z-index: 1;
background: $(tabs.selected.background.color) $(tabs.selected.background.gradient) repeat scroll top center;
color: $(tabs.selected.text.color);
}
e coloque esse:
/* Menu personalizado by Elaine Gaspareto (http://www.elainegaspareto.com)
----------------------------------------------- */
.PageList {
text-align:center !important;
margin: 0px 0px 0px 0px;
padding: 20px 0px 20px 0px;
letter-spacing:0.4em;
position: fixed;
top: 0px;
left: 0px;
z-index: 999;
width:100%;
background: $(tabs.background.color);
}
.PageList li {
display:inline !important;
float:none !important;
padding: 0px 0px 0px 0px;
margin: 3px 0px 3px 0px;
text-decoration:none;
font: $(tabs.font);
text-transform:none;
color: $(tabs.text.color);
}
.PageList li a, .PageList li a:visited, PageList li a:hover {
text-transform:none;
text-decoration:none;
padding: 0px 0px 0px 0px;
margin: 0px 15px 0px 25px;
color: $(tabs.text.color);
}
.PageList li a:hover {
color: $(tabs.selected.text.color);
}
edite como preferir. O que esta marcado de
azul, você poderá colocar
cor alterando para:
background: #fff;
o que está marcado de
roxo você irá colocar a cor que preferir. Confira algumas
tabelas de cores.
ou um background em imagem, alterando para:
background: url('url da imagem');
o que está marcado de
vermelho você irá colocar o endereço da imagem
Na minha opinião em relação ao meu blog, achei um resultado maravilhoso. Uma vez que, já coloquei vários tutoriais mas nenhum deixou como eu queria.
Até mais!
