Sidebar background color for Wells template (responsive)

Site URL: http://walrus-crow-g8y9.squarespace.com

Hello,

First off, the password for my site (since I'm still on the trial version) is: password1

I'm a little rusty on CSS, and I've had very minor success at trying to get what I want so far - basically, I just want the background color of the sidebar/header to be black, while the text will mainly be white. I've got something close to this already (though I haven't found the tags to make the text white yet), however it's not responsive when I switch to mobile display! I've tried fixing it by piecing together some CSS that I found, but the padding leaves whitespace on the top and on the left. How can I accomplish this without having the whitespace?

I made two quick mock-up images that show what I'm trying to accomplish - how can I get to there with what I have now? Also, would love to know how to make the hamburger icon for the mobile version instead of it saying "menu".

Thank you so much for any help you can give!

This will get you part of the way there.

.main-nav a,
#logo .logo.site-title a

  {

  color: white;

  }

Let us know how it goes.

Thank you so much, creedon! That's a huge help!

I'm getting very close to figuring it out, but I since I've decided to add social media icons I've run into a larger problem: how can I get them to shrink and center for mobile? I'd love to have them on the same line as the logo (which I would love to have change to just the icon version in mobile) and hamburger icon but in the center - so logo, social icons, hamburger. However, if I can just have them centered then I would gladly take that instead haha!