Add this to your CSS properties.
Code:
#menu
{
Background-Image: Url('YourHeaderImageLocation');
Background-Color: Transparent;
Border: 0px;
Width: [Image Width]px;
Height: [Image Height]px;
Margin: 0px Auto;
Padding: 0px;
}
#menuformat
{
Margin: 0px;
Padding: 3px 0px 15px 15px;
List-Style: None;
}
#menu ul
{
Margin: 0px;
Padding: 0px:
}
#menu li
{
Float: Left;
Margin: 0px:
Padding: 0px;
}
Then in your index (Or where ever you keep your header code)
Add this
<div id="menu">
<ul id="menuformat">
<li><a href="http://example.com/">example</a></li> <!-- Sample normal link-->
<li><a href="http://images.com/"><img src="http://yoursite.com/image.png" width="300" height="40"></a></li> <!-- Sample Image link -->
</ul>
</div>
This will create links / images in your nav bar. You can add a hover affect to the image links by making a div for each link and assigning an a / a:hover property.
For example, a sample image link's CSS.
Code:
#link
{
background-image: url('http://imagelocation/a.png');
}
#link a
{
background-image: url('http://imagelocation/a.png'); // same location as before.
}
#link a:hover
{
background-image: url('http://imagelocation/b.png'); // Your "Glow / Rollover" image.
}
Hover a Rollover Navbar over an Image?
Hover a Rollover Navbar over an Image?
Linear Mode
