Social Contact Topheader

Versie 1.0 - 27/11/15

Header

Header -> Shrink

Uitleg

Zet het menuontwerp van de site op w 033.4
Kopieer de code
(klik in de box en doe vervolgens ctrl+A)
plak de code in de HTML Hoofdtekst
Sla de wijzigingen in de HTML Hoofdtekst op
Geef de header een achtergrondkleur
Verwijder de kleur achter het menu

<script>
    $(document).ready( function () {
   $('.clear li ul').before($('<div class="arrow-box"><div class="arrow-up"></div></div>'));
    });
</script>

<script>
$(function(){
var shrinkHeader = $('#identityContact').height();

$(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= shrinkHeader ) {
           $('#topNav, .logo img').addClass('shrink');
           $('#topNav ul.clear').addClass('shrink');
           $('#topNav ul ul').addClass('shrink');
           $('.main-container').addClass('shrink');
        }
        else {
            $('#topNav, .logo img').removeClass('shrink');
            $('#topNav ul.clear').removeClass('shrink');
            $('#topNav ul ul').removeClass('shrink');
            $('.main-container').removeClass('shrink');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>

<script>
    $('.footer-social').clone().prependTo('.header-content');
</script>

<style>
@media screen and (min-width: 671px ){
.logo img {height: 68px;width: auto;padding: 5px;position: relative; top: 0px;}
.logo img.shrink {top: 0px; position: fixed;}
.header-content { height: 40px; }
#identityContact, .logo { overflow:visible; }
.header { position: relative; width: 100%; z-index: 999;}
.nav-primary ul li ul, .nav-primary ul li.active ul, .nav-primary ul li .arrow-box { display: none;}
.nav-primary ul li:hover ul, .nav-primary ul li:hover .arrow-box { display: block;}
.main-container { margin-top: -1px; padding-bottom: 15px;}
.main-container.shrink { padding-top: 76px;}
.nav-primary .has-children { padding-bottom: 0;}
.nav-primary {margin: 0 auto; width: 100%; height: 75px;}
.nav-primary ul {line-height: 75px; position: absolute; width: 900px; left: 50%; margin-left:-450px;}
.nav-primary ul.clear.shrink { width: 900px; height: auto; position: absolute; top: auto; left: 50%; overflow: visible; margin-left: -450px;}
.nav-primary ul ul { width: inherit; height: auto;position: absolute; top: auto; left: auto; overflow: visible; margin-left: -10px;
		    -webkit-box-shadow: 0px 0px 5px 0px rgba(53, 53, 53, 0.1);
            -moz-box-shadow: 0px 0px 5px 0px rgba(53, 53, 53, 0.1);
            box-shadow: 0px 0px 5px 0px rgba(53, 53, 53, 0.1);}
#topNav { -webkit-box-shadow: 0px 5px 5px rgba(0,0,0,0.5);
    	  -moz-box-shadow: 0px 5px 5px rgba(0,0,0,0.5);
    	  box-shadow: 0px 5px 5px rgba(0,0,0,0.5);}
#topNav.shrink {position: fixed; top: 0; height: 75px; overflow: visible;
    	    -webkit-box-shadow: 0px 5px 5px rgba(0,0,0,0.5);
    	    -moz-box-shadow: 0px 5px 5px rgba(0,0,0,0.5);
    	    box-shadow: 0px 5px 5px rgba(0,0,0,0.5);}
#topNav ul ul.shrink { position: fixed; top: 62px; }
.nav-primary > ul ul:after, .nav-primary > ul ul:before { content: none;}
.nav-primary ul ul a { float: left;}
.nav-primary ul li ul li { float: left; width: 100%; min-width: 120px; clear: both; padding: 0 10px; margin-left: 0em; left: -10px; }
.nav-primary li {padding: 0 10px; overflow: visible;}
.nav-primary li:first-child, .nav-primary li { margin-left: 0em;}
.nav-primary a { position: static; }
#companyTagline { display: none; }
.logo, .header-title  {position: relative; line-height: 60px;}	
.header-title .h1 { line-height: 2.8; }
.header-title { width: auto; height: auto; }
#companyName { padding: 0 10px; }
.has-header-subline .header-title { top: -100px;}
.has-header-subline .logo { top: 0;}
.has-logo .header-title { display: none;}
.has-header-subline .header-subline { position: absolute; z-index: 1; top: -25px;}
.has-header-title.has-header-subline .header-title { top: 0;}
.header-content .footer-social { text-align: left;}
.header-content .footer-social .btn-social { margin-top: 3px; margin-bottom: 5px;}
}

@media only screen and (max-width: 671px) {
#identityContact, .header-content { padding: 0 4.375% 0 0;}
.logo img { width: auto; height: 40px; margin: 10px 10px;}
.header-content .footer-social { display: none;}
}
</style>