Site navbar overlayed on background image

How to overlay a site navigation bar over a background image

I am relatively new to vBulletin, and have observed that most vBulletin systems seem to rely on the vBulletin navigation bar for site navigation, while some introduce an additional site navigation bar and place this well above all of the vBulletin content. In my own case, I had a requirement to place a navbar on top of a background image, as I was working with a designer who had an extremely specific design requirement. My first thought was to use an image map relying on a graphical navbar but this was unsuccessful (you cannot imagemap a background image). After experimentation, I found a way to use DIV to get around this problem. Here are the steps I took.

Please test this out on a test site first

Step 1. Backup your database. Note all of your Main CSS settiings and save a copy of your header template somewhere.

Step 2. Remove all values for "Background" in CSS
-- Go to admincp -> main css -> delete contents of "background" fields

Step 3. Enter the following into "Background" for main css -> body
-- "#000000 url(images/misc/bkg_image.jpg); background-repeat: no-repeat;
-- (this assumes a black background and a no-repeat requirement for your image)

Step 4. Determine the placement of your new site navbar
-- This will be determined by your design specifications. It is recommended to temporarily include an image-based navbar in your background image first, calculate the exact pixel requirements for "Top", "Left", "Height" and "Width". You can remove the navbar layer from the background image once you have the links all lined up correctly.

Step 5. Add DIV code to header template
-- Go to admincp -> templates -> header and add the following code:

(be sure to replace the portions in green with your own requirements)

<!-- DIV NAVBAR -->
<div
   style="
    font-size: 12px;
   top: 133px;
   left: 590px;
   width: 33px;
   height: 17px;
   position: absolute;
   z-index: 4; 
   visibility: visible;">
<a href="../linkone.html"><font color="#FFFFFF">site link one</font></a>
</div>
<div
   style="
    font-size: 12px;
   top: 133px;
   left: 638px;
   width: 40px;
   height: 17;
   position: absolute;
   z-index: 4; 
   visibility: visible;">
<a href="../linktwo.html"><font color="#FFFFFF">site link two</font></a>
</div>
<div
   style="
    font-size: 12px;
   top: 133px; 
   left: 692px; 
   width: 33pxpx;
   height: 17px;
   position: absolute;
   z-index: 3; 
   visibility: visible;">
<a href="../linkthree.html"><font color="#FFFFFF">site link three</font></a>
</div>
<div
   style="
    font-size: 12px;
   top: 133px; 
   left: 762px;
   width: 33px;
   height: 17px;
   position: absolute;
   z-index: 2; 
   visibility: visible;">
<a href="../linkfour.html"><font color="#FFA442">site link four</font></a>
</div>
<div
   style="
    font-size: 12px;
   top: 133px; 
   left: 812px;
   width: 33px;
   height: 17px;
   position: absolute;
   z-index: 1; 
   visibility: visible;">
<a href="../linkfive.html"><font color="#FFFFFF">site link five</font></a>
</div>
<!--/DIV NAVBAR -->

Step 6. Test your links placement (remember the areas in green, above). If they are not lining up with your specification, tweak the pixel values in each DIV above in the header template.

Step 7. If there is still an image-based navbar layer, edit the background image and remove the navbar layer you were using as a guide.

That should be it!

Optional Steps:

Here is something to consider if your design specs are extremely picky about bkgd-image/forum interaction.

In my own situation, my designer had never designed for vBulletin before, and neither of us were aware at first of some of the basic technical limitations. During development, it dawned on me that to put it simply, not all background images are easy/possible to integrate well with vBulletin.

Test out my link under Internet Explorer, and you will find that when you drag the right-hand edge of the browser window from right to left, the forum content will move to overlap with the image. At this time, I do not know of a way to get around this due to IE's limitations. However, it is possible to introduce a CSS element in Main CSS -> Body to lock that left-hand margin space down for Firefox/Opera browsers:

min-width: 1100px;

There may be other tricks, too of which I am not yet aware. Please post here and PM me if you find a better solution, and best of luck to you!

[silurius]

Originally Posted by silurius

I hope to drop a link/screenshot in the next week. I have another design requirement and a font color issue that are still stumping me.

That and this are the last issues I need to nail before I can post a screenshot or a link.

[Phlex]

okay do that

[silurius]

Updated with screenshots and added an optional CSS element to help with certain kinds of background images.