navbar achter xmas_lights plugin

[Oxize]

Ik draai al een tijdje Wordpress op mijn site, en dacht vandaag eens wat kerstlichtjes te activeren op mijn site om in stemming te komen met de kerst.

Echter overruled de navbar (.nav) de xmas_lights plugin en blijft dus gezellig op de voorgrond zitten, terwijl ik die lichtjes op de voorgrond van alles wil hebben.

Onder mijn theme kan ik custom css toevoegen.

Wat er nu gebeurd is denk ik dat de navbar absolute is en dus alle overige plugins naar de achtergrond gooit.

hoe zou ik dmv van custom css de navbar achter de xmas_lights plugin kunnen gooien?







php code van xmas_lights

code:

<?php
/*
Plugin Name: Xmas Lights
Plugin URI: http://graphicedit.com/blog/plugin/xmas-lights/
Description: This plugin adds Xmas Lights.
Version: 1.0.1
Author: GraphicEdit
Author URI: http://graphicedit.com/

    Copyright 2011  GraphicEdit  (email : [e-mail])

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; either version 2 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/


function xmas_lights() {
?>

<!-- xmas_lights [ start ] -->
<script type="text/javascript">
document.write("<div id='lights' style='position:absolute;width:956px;height:180px;top:-50px;background:url(<?php echo plugins_url() . '/xmas-lights/'; ?>light.png) no-repeat;left:50%;margin-left:-478px'></div>")

setInterval( "xmasLights();", 1000 );
var lights = "active";
function xmasLights(){
    var img = document.getElementById('lights');
    if(lights == "active"){
        img.style.backgroundPosition = "0 -180px";
        lights = "inactive";
    }else{
        img.style.backgroundPosition = "";
        lights = "active";
    }
} 
</script>
<!-- xmas_lights [ end ] -->
<?php   
}


//////////////////
/////////////////
add_action('wp_footer','xmas_lights'); 

?>

stukje stylesheet van mijn theme van het navigatie gedeelte

code:

/*------------------------------------------------*/
/*------------------[NAVIGATION]------------------*/
/*------------------------------------------------*/
.logowrap { float: left; width: 950px; margin-top: 80px; }
.logowrap ul { float: left; margin: 26px 0px 0px 40px; padding: 0px; }
.logowrap ul li { float: left; display: block; margin-right: 10px; }
.logowrap ul li a:link, .logowrap ul li a:visited { padding: 5px 10px; color: #fff; background-color: #404040; border: 1px solid #4c4c4c; display: block; }
.logowrap ul li a:hover { color: #000; }
        /*------------------[DROPDOWN MENU]------------------*/
                .nav ul { position:absolute; top:-999em; }
        .nav li { float:left; position:relative; z-index:9; }
        .nav ul li { width: 100%; }
        .nav li:hover ul, ul.nav li.sfHover ul { left:-40px; top:7px; }
        .nav li:hover li ul, .nav li.sfHover li ul { top:-999em; }
        .nav li li:hover ul, ul.nav li li.sfHover ul { left:161px; top:-26px; }
        .nav li:hover ul, .nav li li:hover ul { top: -999em; }
        .nav li li { padding: 0px; }
        .nav li:hover { }
        .nav li li a:link, .nav li li a:visited { width: 180px; display: block; background-image: url(images/pages-bg-2.gif) !important; background-position: 400px 0px; }
        .nav li li a:hover { }

Zie mijn site op: www.oxize.nl

[Rikkiz0r]

Maak van xmas_lights op regel 33 het volgende:

code:

document.write("<div id='lights' style='position:absolute;width:956px;height:180px;top:-50px;background:url(<?php echo plugins_url() . '/xmas-lights/'; ?>light.png) no-repeat;left:50%;margin-left:-478px;z-index: 999;pointer-events:none;'></div>")

Edit:
Ik heb hem een klein beetje aangepast, je menu doet het nu ook nog

[ Voor 19% gewijzigd door Rikkiz0r op 04-12-2014 21:16 . Reden: Code aangepast ]

[Oxize]

Omg, was het zo simpel? Super bedankt!

[Bosmonster]

Let wel dat pointer-events niet werkt in IE < 11 (een flink deel van de internetters dus). En zij dus je menu niet meer kunnen gebruiken.

[ Voor 21% gewijzigd door Bosmonster op 05-12-2014 12:57 ]

[Rikkiz0r]

Met behulp van deze Polyfill zou het in IE 10 ook moeten werken: https://github.com/kmewhort/pointer_events_polyfill

[Bosmonster]

Een polyfill wil ik dat niet noemen. Hooguit een wat ranzige workaround, die alleen werkt met een zeer beperkt aantal events (eigenlijk alleen javasript click-events).

[JJ93]

Ik vind je site wel erg druk worden zo, een schuivende gallery, bewegende sneeuwvlokken en knipperende lampjes.. Ik zou ook meteen de About Me pagina even onder handen nemen want zo goed als elke zin bevat wel een spelfout of een andere grammaticale fout.

[Oxize]

JJ93 schreef op dinsdag 09 december 2014 @ 00:50:
Ik vind je site wel erg druk worden zo, een schuivende gallery, bewegende sneeuwvlokken en knipperende lampjes.. Ik zou ook meteen de About Me pagina even onder handen nemen want zo goed als elke zin bevat wel een spelfout of een andere grammaticale fout.

Wat heeft dat te maken met de navbar positie?