Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #60263
    Schelbi
    Participant

    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;
    }
    #60349
    Sakin
    Keymaster

    @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;
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • The topic ‘sticky header and menu shrink on page scroll’ is closed to new replies.