OK, this seems to happen because you use some funky styling for the main menu items (e.g. the item links are absolute positioned inside the LI’s, etc. which breaks the positioning calculations). So to fix the issue, you could do the following:
1) In the following file:
a) instead of this option:
mainMenuSubOffsetY: $('header').height() - parseFloat($('#main-menu > li').css('padding-top')),
pass this:
mainMenuSubOffsetY: 1,
b) remove the following (you won’t need it any more):
$(window).resize(function () {
console.log("START window resize for main menu");
var sm = $('#main-menu').data('smartmenus');
sm.opts.mainMenuSubOffsetY = $('header').height() - parseFloat($('#main-menu > li').css('padding-top'));
//sm.opts.subMenusSubOffsetY = $('header').height() - parseFloat($('#main-menu > li').css('padding-top'));
$('#main-menu').data('smartmenus', sm).smartmenus('refresh');
console.log("END-- window resize for main menu");
});
2) In the following file:
a) remove the padding-top
declarations in these rules:
header nav ul.menu > li {
width: 16.5%;
height: 100%;
padding-top: 4%;
position: relative;
float: left;
line-height: 1.3;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
@media (min-width: 1550px) {
header nav ul.menu > li {
padding-top: 47.265625px;
width: 195.015625px;
}
}
b) replace the following rule:
header nav ul.menu > li > a{
z-index: 10;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
}
with the following:
header nav ul.menu > li > a{
height:100%;
}
c) replace the margin-top
declaration in the following rule:
header nav ul.menu > li > a > div{
...
margin-top: 23.265625%;
}
with a top
declaration like this:
header nav ul.menu > li > a > div{
...
top: 30%;
}
These should fix the issue and will also simplify a bit your JS code. Let me know if you have any questions.
Cheers!