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; } 

here update codepen example


Comments

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -

How to provide Authorization & Authentication using Asp.net, C#? -