Edit: I need to move on for now, so I've temporarily added style="line-height:50px to the span element of the first li item (nav-item--home). If anyone sees the difference between the two sites, which makes the first <a> element ignore its line-height, please let me know.
I'm trying to implement the same styling from the top navigation bar on the site:
on the site:
As you can see, the first element inside the <ul> doesn't align vertically with the rest. The element consists of:
<li class="nav-item nav-item--home level0 level-top active">
<a class="level-top" href="http://learn.acrobotic.com/">
<span class="ic ic-home"></span>
</a>
</li>
By comparing the two I notice that the <span> element has the correct size (30x16). However, the <a> element containing it has an incorrect height of 16px (54x16) whereby it should be 50px. Its height should be set by the line-height property provided it's a block element.
For debugging purpose using the console in Developer Tools I check the CSS by:
jQuery('.ic-home').parent().css('display')
"block"
jQuery('.ic-home').parent().css('line-height')
"50px"
Both properties seem to be set correctly, however, as the title mentions the block element is ignoring the line-height property. If you can shine a light into this problem I'd be grateful as it's been a couple of days of banging my head against this wall.
