Adicionar barra de navega��o no cabe�alho da imagem

texto pode ser Navbar links, imagens de liga��es, ou ambos. Uma vez que eles s�o ferramentas de navega��o, eles devem ser algures no topo da p�gina e facilmente percept�vel. Voc� pode ter uma imagem de fundo no cabe�alho e depois de adicionar o Navbar, voc� encontrar� o Navbar sentados na parte superior ou inferior do cabe�alho. Talvez voc� queira que o Navbar algures no meio da imagem em vez. Neste artigo, vamos explorar ainda mais dicas sobre o alinhamento da personaliza��o da barra de navega��o e mov�-lo para a posi��o exata dentro do cabe�alho.

Cabe�alho da imagem usando o Blogger caracter�stica

Se voc� tiver inserido a imagem de fundo para o cabe�alho usando o "Editar Cabe�alho" m�todo, e acrescentou barra de navega��o, voc� vai ver o cabe�alho da imagem e do Navbar como separar 2 itens como este: -



Isso � porque eles s�o diferentes elementos, ou seja, o cabe�alho da imagem � composta no cabe�alho widget que o Navbar est� no HTML widget. Um vem ap�s o outro na �rea do esquema. Para mover o Navbar-se ainda mais para que ele se encontra dentro do cabe�alho da imagem, podemos definir as margens superiores e inferiores do Navbar widget. Se voc� tiver inserido o Navbar atrav�s do nosso tutorial, voc� teria lembrado de que o elemento denominado "newnavbar". Ir para o Modelo -> Editar c�digo HTML e adicionar outro: --

#newnavbar{
margin: -80px 0 80px 0;
}

Existem quatro valores na fixa��o da margem. Eles s�o, respectivamente, � top margin, right margin, bottom margin e left margin. Ao indicar um valor negativo margem superior, estamos mudando o Navbar para cima, no cabe�alho da imagem. O resultado � a barra de menu no cabe�alho como este: --




Se voc� quiser que o Navbar ainda mais para a direita, colocar um valor negativo para a margem direita configura��o. Do mesmo modo, se voc� deseja transferir o Navbar para a esquerda, indicam um ajuste negativo margem esquerda. Desde tamanhos de imagem de modelo e estilos diferentes, voc� teria que experimentar diferentes valores margem de encontrar uma �tima defini��o para o seu modelo. Visualize o modelo para ver o novo layout.

Cabe�alho da imagem, alterando estilo

A segunda forma de inserir a imagem de fundo para o cabe�alho � o "Modificar estilo" m�todo. Isto � feito enviando o cabe�alho da imagem em um servidor e colocar um link no Header style: -

#header-wrapper {
background-image: url(URL of image);
}

Depois de ter adicionado a barra de navega��o, voc� perceber� que est� posicionada imediatamente ap�s o Blog Descri��o, e est� dentro do cabe�alho da imagem.

Este parece ser o que quiser, como o Navbar j� � uma parte do cabe�alho da imagem. No entanto, existe ainda a necessidade de ajustar a posi��o. Por exemplo, voc� pode ver que a nossa imagem no centro da imagem do cabe�alho � "cortar". A nossa imagem � 400px altura, mas uma vez que o t�tulo ea descri��o n�o ocupar muito espa�o, o cabe�alho da imagem n�o est� plenamente demonstrado. Se queremos mostrar todo o cabe�alho da imagem, podemos inserir uma altura especifica��o para o header-wrapper defini��o como esta:

#header-wrapper {
background-image: url(URL of image);
height:400px;
}

Em seguida, tal como t�nhamos mencionado, � a barra de menu ap�s a descri��o e dentro do cabe�alho. Queremos passar para baixo a fim de que esta � a parte inferior do cabe�alho da nossa imagem. Mesmo que antes, n�s inserir uma outra defini��o para o estilo "newnavbar": --

#newnavbar{
margin: 400px 0 0 0;
}

Desta vez, queremos transferi-lo para baixo, para que adicionar um valor positivo para a margem superior. H� que temos, uma plena cabe�alho da imagem, e da Barra de navega��o horizontal em nossa posi��o desejada na imagem.