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:-