- This topic has 1 reply, 2 voices, and was last updated 8 years, 9 months ago by Sakin.
Viewing 2 posts - 1 through 2 (of 2 total)
-
AuthorPosts
-
June 29, 2015 at 2:43 pm #60263SchelbiParticipant
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; }
July 1, 2015 at 9:34 am #60349SakinKeymaster@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; }
-
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
- The topic ‘sticky header and menu shrink on page scroll’ is closed to new replies.