I am creating a menu with a submenu that has a varying line-height.
Unfortunately, I am struggling to prevent this line-height from impacting the list items in my child (submenu).
I attempted using ul.nav > li but it continues to affect the lower menu bar.
$(window).on("scroll resize load", function () {
if($(window).width() > 863) {
wide();
if ($(window).scrollTop() > 75) headerLow();
else headerHigh();
} else {
headerLow();
thin();
}
});
var headerHigh = function () {
$('#head').removeClass('mini').css('height', '75' );
};
var headerLow = function () {
$('#head').addClass('mini').css('height', '60' );
};
var thin = function() {
$('#slider').css({ 'padding-top' : '60px'});
};
var wide = function() {
$('#slider').css( 'padding-top' , '78px');
};
<div id="head">
<div class="container">
<ul class="nav pull-right">
<li><a href="#"></a>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
.nav li { line-height: 80px;transition: line-height 0.5s ease; }
.nav li > ul li { line-height: 10px; }
.mini ul.nav > li, .mini .logo { line-height: 60px; }
.mini h1 { font-size: 2em; }
The issue arises when I scroll down, and the second menu is affected by .mini. See live demo.