Ning 3.0 - Creating Your Logo and a Full Width Background Header - the "responsive" way:

Adding a Logo and Header Background can be a tricky proposition when working with responsive design. I now of course know why the Ning theme CSS forces the width of the Logo. This prevents your logo from only showing a percentage of the width when your site is displayed on a mobile device. I don't agree with the forced height, but another topic of conversation.

Prepare Your Logo Image:

• Your best bet if you want to add a full width banner image - - upload as your background image under Header (not body Background). We'll do this last.
• First step, prepare or create your Logo. And preferably just the Logo Text.
• Make sure it is no more than 299 pixels in width. The theme I'm currently working with, I needed to go 135px in height, or add custom CSS. Just so happens, the 135px works for me well on this design.
• You want to add your logo with Design Studio/Header/Upload Logo Image
• Once you've uploaded the logo, hop over to your mobile device, and see how it looks. Does it "land" in the right place? If not, work with it, until it does.

Now, Create Your Full Width Header/Banner.

• Go ahead and use the full width of the responsive grid: 960px (Note: I may change this to 940px later. For now, 960 px works well for me.)
• Make sure you have left plenty of room at left of banner image, to "lay" your logo on top of it - - an empty space.
• Upload your banner image via Design Studio/Header/Upload Background Image
• I had to add the background position so the left side of my banner image shows on the mobile view.
• Add this code to your Custom CSS:

header {
    background-position: left top;
}

You'll probably have some tweaking to do. But, this is the best way to add a logo and a full width banner image. Why?

• It gives your users a hyperlink when clicking on your logo - - to access your home page.
• It keeps your logo intact and in full view from a mobile device.
• Instead of limiting yourself to using only 299px to accommodate mobile device, you can take advantage of the background to bring your logo to life.
• Once you play around with these steps, you'll "get" why this is a good way to go. =)
• You could just upload the entire banner as one piece (Header/Background Image), making sure your logo is in the right place at left of banner. But, with responsive resizing it can get messy. By laying your logo on top of the banner, you'll offer a better User Experience and a neater site design.

Alternative Method:

• If you want, you can simply make your background 960px minus 299px (width of logo area). This would be 661px in width. I would go with approximately 625px tops, for white space between your logo and your header background image.
• Upload your Background Image as explained above.
• Use this code for position:

header {
    background-position: right top;
}

I haven't tried this method yet. But, in theory, it should work.

Hope this helps someone.

Best,

Jen