Headers
A well designed header is essential simce it is the first item that visitors see when they land on the site. Multifunction headers created with EverWeb's Responsive Row widget can end up looking very messy and have disappointing results when viewed on mobile devices.
Using a grid layout allows more flexibiity since this uses both columns and rows - not just columns.
Switch
The first info link below shows an example of a "Switch" header with a CSS Grid layout where the logo and h1 heading are in row 1 and the inline navigation is in row 2 at browser/screen widths above the break point.
On narrower device screens the navigation switches to a "hamburger" icon with a drop down menu. This is inserted in row 1 to the right with the logo remaining in row 1 to the left.
The heading drops down to row 2 to keep it clear of the other two items.
Info
Attempting to add extra info to headers can be a challenge when it needs a logo, phone number, navigation, heading, email link and so on.
The Info Header overcomes this by having an info drop down for contact and other important links. The main navigation is added as a separate item which can either scroll with the header or stick in position at the top right of the page.
Hero
Since the hero image seems to be an essential item for many web pages it makes sense to combine it with the other functions.
The Slide In Right Header Nav has a hero image, animated heading and overlay and a slide in right navigation menu. It is supplemeted by an overlay heading with optional logo and a contact bar with phone number which switches to a "Call Me" button, an email icon and a contact form which opens in a modal window.