Hor Drop A

Versie 2.15 - 01/1/15

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() {
	var heightHeader = $('.header').height();
	var heightContainer = $('.header-container').height();
	var heightNav = $('.nav-primary .clear > li').height();
	var color = $( '.nav-primary ul ul' ).css( "background-color" );
	if ($(window).width() > 672) {
   		$('.main-container').css({marginTop: heightHeader + 12 + 'px'});
   		$('.nav-primary .clear').css({marginTop: (heightContainer - heightNav) / 2 + 'px'});
	};
	if ($(window).width() < 671) {
   		$('.main-container').css({paddingTop: heightHeader + 12 + 'px'});
	};
	$('.clear li ul').before($('<div class="arrow-box"><div class="arrow-up"></div></div>'));
	$('.arrow-box').css("border-bottom-color", color);
});
</script>
<style>
.header { width: 100%; position: fixed; z-index: 99; height: inherit;}
#identityContact { height: 100%;}
#topNav { position:absolute; top:0;}

.nav-primary > ul {line-height: initial;}
.nav-primary li { padding: 0; overflow: visible;}
.nav-primary li:first-child, .nav-primary li { margin-left: 0em;}
.nav-primary a { position: static; padding: 10px 5px; display: inline-block;}
.nav-primary ul 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;}

.nav-primary .has-children { padding-bottom: 0;}
.main-container { padding-bottom: 14px;}
.nav-primary ul ul { width: inherit; height: auto; position: fixed; top: auto; left: auto; overflow: visible; margin-left: -10px;}
.nav-primary ul ul a { float: left; padding: 0;}
.nav-primary ul ul li { float: left; width: 100%; min-width: 120px; clear: both; padding: 0 10px; margin-left: 0em; left: -10px;}
.nav-primary > ul ul:after, .nav-primary > ul ul:before { content: none;}

.arrow-box { width: 0; height: 0; margin: -5px auto 0 auto; margin-top: -5px; position: relative; z-index: 999; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid;}

.logo { width: auto; height: auto; position: relative; padding: 10px 0;}
.logo img { width: 200px; height: auto;}

.has-logo .header-title { display: none;}
#companyTagline { display: none;}
.logo, .header-title { line-height: 60px;}
.header-title .h1 { line-height: 2.8;}
.header-title { width: auto; height: 62px;}
#companyName { padding: 0 10px;}
.has-header-background #identityContact { background-image: none; height: 0;}
.has-header-background #identityContact img { margin-top: 0;}
    	
@media only screen and (max-width: 671px) {
	#identityContact, .header-content { padding: 0 4.375% 0 0;}
}
</style>