Logobereich Transparent

Hier schalten wir den Hintergrund des Logobereiches auf Transparent. Blenden ein größeres Logo ein, vergrößern die Navigation und verrutschen diese etwas nach unten. Somit erreichen wir ein harmonisches Zusammenspiel mit dem Header. Sobald nach unten gescrollt wird blenden wir ein kleines Logo ein, verrutschen die Navi wieder nach oben und verkleinern diese wieder. Der Logobereich bekommt eine Hintergrundfarbe und einen Schatten nach unten.

zur seite wechseln

CSS-Code

Diesen Code per Einstellungen > CSS einfügen und anpassen.

markieren & kopieren

Quelltext

Diesen Code per Widget > Quelltext einfügen und anpassen.

<div class="llogo"> 
<a href="https://www.zella.de" target="_self"><img title="zur Startseite" alt="" border="0" src="https://www.zella.de/code/bilder/logo-weiss5.png" alt="Logo"></a></div>
<div class="llogo2"> 
<a href="https://www.zella.de" target="_self"><img title="zur Startseite" alt="" border="0" src="https://www.zella.de/code/bilder/logo-weiss40px.png" alt="Logo"></a></div>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery(window).scroll(function(){
				/*CSS ab Scrollposition 150 Pixel*/
        if(jQuery(this).scrollTop()>=150) {
        jQuery('.noshadow, .noshadow > .navbar-inner').attr('style','background: rgba(0, 0, 0, 0.6); font-size: 1.0em; margin-top:0; box-shadow: 0px 10px 7px -6px rgba(0,0,0,0.2) !important; transition: margin-top, background .5s;');
            jQuery('.navbar .nav > li > a').attr('style','color: #fff;');
				jQuery('.llogo').attr('style','display: none;');
					jQuery('.llogo2').attr('style','display: block;');
						jQuery('.navbar-inner button.btn-navbar, .navbar-inner button.btn-navbar:hover').attr('style','color: #fff; border: 1px solid #fff;');
    }   
				/*CSS wenn wieder nach oben gescrollt*/
        else if (jQuery(this).scrollTop()<150) {
        jQuery('.noshadow, .noshadow > .navbar-inner').attr('style','background:transparent !important; margin-top:25px;');
            jQuery('.navbar .nav > li > a').attr('style','color: #fff;');
				jQuery('.llogo').attr('style','display: block;');
					jQuery('.llogo2').attr('style','display: none;');
						jQuery('.navbar-inner button.btn-navbar, .navbar-inner button.btn-navbar:hover').attr('style','color: #fff; border: 1px solid #fff;');
								/*ANFANG ab 975px Menue oben*/
								if (window.matchMedia('(max-width: 979px)').matches)
								{ jQuery('.noshadow, .noshadow > .navbar-inner').attr('style','background:transparent !important; margin-top:0;'); }
								/*ENDE ab 975px Menue oben*/
        }
    })
})
</script>

<div id="back-top2" style="display: block; ">
  <a href="#top">
<span class="fa-stack fa-lg">
  <i class="obenkreis fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-angle-double-up fa-stack-1x obenpfeil"></i>
</span>
   </a>
</div>
<script type='text/javascript'>
//<![CDATA[
 $(document).ready(function(){
 
     // hide #back-top 
     $("#back-top2").hide();
    
     // fade in #back-top
     $(function () { 
         $(window).scroll(function () {
             if ($(this).scrollTop() > 200) {
                 $('#back-top2').fadeIn();
             } else {
                 $('#back-top2').fadeOut();
             }
         });
          // scroll body to 0px 
         $('#back-top2 a').click(function () {
             $('body,html').animate({
                 scrollTop: 0
             }, 800);
             return false;
         });

});
 });
//]]>
</script>

markieren & kopieren

Logobereich Transparent

CSS-Code

Quelltext

NEUE BEITRÄGE