Sunday, January 31, 2010

bench3

How To Add A Navigation Link Bar To The Header In Blogger | Merging A Navigation Bar With Header Image In Blogger.

Here we will see how to add a navigation bar to your blogger. The Navigation bar can be text links, image links, or both. Since they are navigation tools, they should be somewhere at the top of the page and easily noticeable. You may have a background image in the Header and after adding the Navigation bar, you find the Navigation bar sitting at the top or bottom of the Header.


Perhaps you want the Navigation bar somewhere in the middle of the image instead. In this article, we shall explore further customization tips on aligning the Navigation Bar and moving it to the exact position within the Header.

Header Image using Blogger feature
If you have inserted the background image into the Header using the 'Edit Header' method, and added the Navigation Bar, you will see the Header image and the Navbar as 2 separate items like this:-

Merging Of Header Image With Navigation Bar In Blogger:
This is because they are different widgets, i.e., the Header image is comprised in the Header widget whereas the Navbar is in the HTML widget. One comes after the other in the layout. To move the Navbar further up so that it is within the Header image, we can set the top and bottom margins of the Navbar widget. If you have inserted the Navbar through our tutorial, you would have remembered that we called the widget “newnavbar”. Go to Template - > Edit HTML and add another code:-

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

There are four values in the margin setting. They are respectively the top margin, right margin, bottom margin and left margin. By indicating a negative top margin value, we are shifting the Navbar upwards, into the Header image. The result is the menu bar within the Header like this:-
 
If you want the Navbar further to the right, put a negative value to the right margin setting. Similarly, if you want to shift the Navbar to the left, indicate a negative left margin setting. Since image sizes and template styles differ, you would have to try out different margin values to find an optimum setting for your template. Preview the template to see the new layout.

Header Image by modifying stylesheet

The second way to insert the background image into the Header is the 'Modify Stylesheet' method. This is done by uploading the Header image onto a server and placing a link in the Header style:-

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

Once you have added the Navigation Bar, you would notice that it is positioned immediately after the Blog Description, and it is within the Header image.
This seems to be what you want, as the Navbar is already a part of the Header image. However, there is still a need to fine-tune the position. For example, you can see that our picture in the center of the Header image is 'cut off'. Our image height is 400px but since the Title and Description do not take up much space, the Header image is not fully shown. If we want to show the entire Header image, we can insert a height specification into the header-wrapper definition like this:-

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

Next, as we had mentioned, the menu bar is after the Description and within the Header. We want to move this downwards so that it is at the lower part of our Header image. Same as before, we insert another style definition for the “newnavbar”:-

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

This time, we want to shift it down, so we add a positive value to the top margin. There we have it, a full Header image, and the horizontal Navigation Bar at our desired position within the image.

bench3

About bench3 -

Haja Peer Mohamed H, Software Engineer by profession, Author, Founder and CEO of "bench3" you can connect with me on Twitter , Facebook and also onGoogle+

Subscribe to this Blog via Email :