Search code examples
cssmenuslidernivo-slider

Nivo slider css drop down menu conflict


I am working on a website that I am trying to add nivo slider to. The issue that I am having is that the slider covers up the css drop down menu and I don't see the directional arrows within the menu.

When I added z-index:-50 to the .nivoSlider line in the nivo-slider.css file the menu worked as it should, by not hiding behind the slider, but I still do not have the navigation arrows, and now the navigation arrows within the actual slider (left or right) are visible but don't work.

The link to see these issues is here.

Any help that is suggested will be appreciated. Thanks, Joe


Solution

  • Ok, first remove z-index from .nivoSlider. Second and most important part - you have structure in menu like this:

    <ul id="nav-one" class="dropmenu css-only">
    <li><a style="border-left:1px solid #CCCCCC; padding-left:23px; padding-right:23px;" href="index.php">Home</a></li>
    
    <li><a href="company.php">Company</a>
        <ul class="SomeNewClass">
        <li><a href="history.php">History</a></li>
        <li><a href="markets.php">Markets</a></li>
        <li><a href="news.php">News</a></li>
        <li><a href="licensee-advisory-board.php">Licensee Advisory Board</a></li>
        <li><a href="copyright-notice.php">Copyright Notice</a></li>
        </ul>
        </li>
    <li><a href="branding.php">Branding</a>
        <ul class="SomeNewClass">
        <li><a href="graphics.php">Graphics</a></li>
        <li><a href="signs.php">Signs</a></li>
        <li><a href="paint.php">Paint</a></li>
        <li><a href="dispenser-doorSkins.php">Dispenser DoorSkins</a></li>
        <li><a href="dispenser-overlays.php">Dispenser Overlays</a></li>
        <li><a href="image-manual.php">Image Manual</a></li>
        <li><a href="image-evaluation-form.php">Image Evaluation Form</a></li>
        </ul>
    </li>
    <li><a href="payments-processing.php">Payments Processing</a>
        <ul class="SomeNewClass">
        <li><a href="fleet-card.php">Fleet Card</a></li>
        <li><a href="echoSat.php">EchoSat</a></li>
        <li><a href="PCI-compliance.php">PCI Compliance</a></li>
        <li><a href="transnational.php">TransNational</a></li>
        </ul>
    </li>
    ....
    ....
    ....
    

    As you can see, i've added class named .SomeNewClass. Put this class in all positions like i show you in example and then put this into your CSS

    .SomeNewClass
    {
        z-index: 99999;
    }