Need to add content to global header w/o breaking the layout

[gjt]

It seems to me that Iron & Wool images don't become responsive until the view port has shrunk to a certain size (768px?).

But I need to make global header images responsive at larger sizes, or at least I'm thinking that will help.

We have added certain global header images and as a result -- as the viewport shrinks but before the mobile navigation/header kicks in -- the layout is breaking.

This is the site: http://www.avinylfence.com/

The global header layout is fine until the viewport gets about 1135px wide and then begins to break up, undoubtedly the result of the additional elements (the BBB logo and large 800 number) that have been added, which required some rearranging of the default layout.

I'm looking for a solution that let's me keep the BBB logo and the 800 phone number in the larger widths without messing up my layout and I'm thinking if the images were responsive at those widths it would help. There are other solutions I'm sure.

Any ideas??

[Matt Zimmermann]

You will need to play with the column widths in the 'main-header' element. I would start by adding a medium breakpoint, say medium-whole, and update the existing 'medium-' ones to 'large-' and the 'large-' to 'x-large-'. Probably remove the padding you have added for the phone number as well.