This pattern works by tweaking the standard .masthead-inner
.
To enabele we add the responsive .columns
classes and .compact-for-data
is added to header.masthead
. We can also add .compact-disabled
to dynamically disable the responsive nature.
Some guidance:
data-sticky-container
on the masthead, after all the focus is meant to be on the data..colapse
to .masthead-inner.row
to remove margins on the child columns.In v1.2 we've already shaved 10px off the black bar, but the need remains for a yet-thinner div#masthead
on inside pages that are search-result or data focused. In all it's 56% thinner than the current look.