Comment 2 for bug 1698257

Some insight about the patch ..

I have investigated two different solutions:

The first was to use a Javascript function. This function would find the height of the navigation element and use this value to add additional padding-top to the body element. This approach is similar to what the current code does, however the value is able to change depending on the variable header height.

The issue with this approach is that the Javacript loads too slowly and the content and styles load before the JS. Unfortunately this delay causes the content to 'jump' when the padding-top is applied through JS.

The second approach and the solution I've submitted, relies on a 'spacer' div. Adding additional html markup is not ideal, however after researching this issue it's the best solution I could come up with.

The spacer div is a clone of the header element and it's purpose is to push content down. It uses the same classnames as the header and nav elements to ensure it inherits the new height and necessary positions when site messages are added.

All child elements of the nav inherit it's height, therefore you only need to change the .navbar-main's height property. This is also enforced as a max-height has been set on the .navbar-main element. The image height is set with a percentage value, and allows the image's size to increase relative to the navbar's height.