css - How to stop shrinking effect on header on scroll? -
i consider myself webdev noob , learn better messing around existing examples. i've been looking way of making navbar transparent transforms solid background upon scrolling down. found wanted in free template. has 1 feature dont want though - shrinks navbar upon scrolling , rather keep navbar same height. here code (my first attempt codepen dont laugh!):
http://codepen.io/quanticspaz/pen/zgwxym
// jquery collapse navbar on scroll $(window).scroll(function() { if ($(".navbar").offset().top > 50) { $(".navbar-fixed-top").addclass("top-nav-collapse"); } else { $(".navbar-fixed-top").removeclass("top-nav-collapse"); } }); // jquery page scrolling feature - requires jquery easing plugin $(function() { $('a.page-scroll').bind('click', function(event) { var $anchor = $(this); $('html, body').stop().animate({ scrolltop: $($anchor.attr('href')).offset().top }, 1500, 'easeinoutexpo'); event.preventdefault(); }); }); // closes responsive menu on menu item click $('.navbar-collapse ul li a').click(function() { $('.navbar-toggle:visible').click(); }); is css or js thats causing shrinking effect on scroll? please put me out of misery... i've been messing couple of hours , driving me bonkers!
in css find class called top-nav-collapse, being set when page scrolled , has padding property causing shrinking effect. remove padding , problem solved:
.navbar-custom.top-nav-collapse { border-bottom: 1px solid rgba(255, 255, 255, .3); background: #000; }
Comments
Post a Comment