Minified Sticky Header on Scroll - techcrunch style header navigation

Sparkling
1

Hi,

First of all thank you for the great theme,
I searched the forums but could not find information about Minified / Shrinking (A Square logo changes to Just Rectangular small Website Name) Header. There is answers of Sticky header but I am looking for is I thing Changing header…

As an Example http://techcrunch.com/ is the exact example for what I am looking for.

I will be glad if you can help me

2

Here there is a bootsrap solution/sample I found and trying adopt but seems like not working

3

Hi @enstarter,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following code in the functions.php file of your child theme.


function custom_sparkling_nav(){?>
  <script type="text/javascript">
    jQuery(window).scroll(function() {
      if (jQuery(document).scrollTop() > 46) {
        jQuery('nav.navbar').addClass('shrink');
      } else {
        jQuery('nav.navbar').removeClass('shrink');
      }
  });
  </script>
  <style type="text/css">
    nav.navbar.shrink {
      position: fixed;
      z-index: 9999;
      width: 100%;
      top: 0;
      left: 0;
    }
    body.admin-bar nav.navbar.shrink{
      top: 32px;
    }
    #masthead nav.navbar.shrink li a{
      padding: 5px 15px;
    }
    nav.navbar.shrink #logo img {
      max-width: 100px;
    }
  </style>
<?php }
add_action('wp_footer', 'custom_sparkling_nav');

Best Regards,
Movin

4

Thank you so much hope it will work

5

You are most welcome here :slight_smile: