Add Navigation Bar in Header Image

In our article on Horizontal Menu and Navigation Bar, we have given you a how-to guide on adding a horizontal navigation bar into the Blog template. This Navbar 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 Navbar, you find the Navbar sitting at the top or bottom of the Header. Perhaps you want the Navbar 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:-



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.



© Tricks for New Bloggers