Hor Drop D

Versie 1.0 - 21/9/15

Uitleg

Zet het menuontwerp van de site op w 033.3
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

* Navigatie moet uit een even aantal menu items bestaan

Voorbeeld website: http://www.zonnig-zuid.nl/

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

.header-content {padding-top: 20px;}

.header .logo img { width: auto; height: 135px;}
.has-logo .header-title, .header-subline {display: none;}

.nav-primary { background: #717070; top: -90px; position: relative; border-top: 4px double #EAEAEA; border-bottom: 4px double #EAEAEA;}

.nav-primary {width:100%;}
.nav-primary > ul > li { border-top: 0; padding-top: 0px; line-heigth: 2em;}

.top-container, .header-content {position: relative;  margin: 0px auto;  width: 200px;  z-index: 999;}
.main-container {padding-top:0; position: relative; }
.main {margin-top: -120px;}
}
</style>