The need for a thinner masthead bar is a long standing issue that has been brought to the fore thanks to efforts by @markbingley. So we're applying a renewed effort into creating a pattern (and usage guidance).
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.
Here's how it could look:
That's 56% thinner than the current look.
Method:
Do
Add the class .compact-for-data to your div.masthead
Disable the example search queries on your search box. Your user should have already searched or have arrived at their destination.
Use this on pages where the primary content is a large table or data visualisations where you want your service branding to "get out of the way"
Consider
Adding responsive classes to the menu to collapse into a thinner line for large screens
The need for a thinner masthead bar is a long standing issue that has been brought to the fore thanks to efforts by @markbingley. So we're applying a renewed effort into creating a pattern (and usage guidance).
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.Here's how it could look:![image](https://cloud.githubusercontent.com/assets/928100/25130644/d3476920-243a-11e7-829e-b330a8ca4684.png)
That's 56% thinner than the current look.
Method: Do
.compact-for-data
to yourdiv.masthead
Consider
Adding responsive classes to the menu to collapse into a thinner line for large screens
or, without a search box:![image](https://cloud.githubusercontent.com/assets/928100/25131281/0c3dd500-243d-11e7-8a2f-24833ed9fddc.png)
Do not
Pudding: