Question

I have a question. I’m currently trying to implement a Nivo Slider as header. On this header is a box with logo (left), a box with a navigation (bottom left) and a box with a subnavigation (top right).

I tried implementing it with this tutorial. The slider works, but now I have to know how I can use it as “header background”, in other words, how do I get it behind the objects, without curshing it and moving the objects from their predetermined position.

This is my code:

<div id="header">
<?php include("header_insert.php"); ?>
<div id="logo">
    <a href="<?php echo home_url( '/' ); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="Website Title"/></a>
</div>
<div id="sub_nav">
    <ul>
        <?php wp_list_pages('title_li=&exclude=56,54'); ?>  
    </ul>
</div>
<?php wp_nav_menu( array(‘menu’ => ‘Navigation’ )); ?>

I did not change much CSS, except this:

    #logo, #sub_nav, .menu-navigation-container {
z-index: 9999;
}

#wrapper, #slider {
height: 504px;
width: 960px;
margin: 0 auto;
}

.nivoSlider {
border: 0;
}

There are a few CSS files from the slider, but my main problem is that the logo and subnav are now outside of the header area, while the navigation works fine (In front of slider and on the right position)

Answer 1

css:
z-index
to the rescue 🙂

Use low z-index on slider, and higher value on elements, that You would like to put “on top”.
If doesnt work, try adding position: relative or position:absolute to elements with z-index.