Menu acima do cabeçalho (sem a barra de pesquisa)

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.

Obrigada Elaine Gaspareto

Até mais!