[Schelbi]

Hi Sakin,

is it possible to make this work? my site is http://9palacestcm.com

/**
* Make Header Shrink on Page Scroll
**/ 
add_action ('wp_footer','vr_shrink_head',1);
function vr_shrink_head() {
?> 
<script>
jQuery(document).ready(function($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 100) { 
            $('header').addClass('shrink');
        }
        else{
            $('header').removeClass('shrink');
        }
    });
});
</script> 
<?php 
}

header.shrink {
  position:fixed;
  clear:both!important;
  width:100%;
  height:50px!important;
  max-height:50px!important;
  min-height:50px!important;
  z-index:999999999;
  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}

[Sakin]

@Schelbert: I don’t know where did you got that script and css. I hope it works fine. So, consult with your developer.

1. You can add script in “Appearance => Theme Options => Webmaster Tools => Header and Footer Codes” box:

<script>
jQuery(document).ready(function($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 100) { 
            $('header').addClass('shrink');
        }
        else{
            $('header').removeClass('shrink');
        }
    });
});
</script> 

2. Then you can add your css in “Appearance => Theme Options => Custom CSS”

header.shrink {
  position:fixed;
  clear:both!important;
  width:100%;
  height:50px!important;
  max-height:50px!important;
  min-height:50px!important;
  z-index:999999999;
  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}

[Author]

Posts