> If i change the height settings or even remove it, my menu bar(grey bg only) displays over the logo.
I don’t see that in Chrome or Firefox using the dev tools. What browser are you using?
Re. the huge space bewteen menu bar and logo:
When your first media query kicks in **.logo** and **.header-right** both get float: none. If you take .logo out of that bit of CSS then the gap disappears. Hard to tell quite what’s going on though, below that you have these empty containers so hard to tell what changes would be needed if you start putting content in .top-social-profiles.