Site Navigation Adjustment

Good Day!
1st
I want to adjust my site navigation, Because my logo and my menu is too close so i try to adjust using

nav#site-navigation div {
		padding-right: 0px;
		margin-left:0px;
		margin-right:-80px
}	

It works fine on desktop view . But when I try to resize/ view on mobile phone the menu is not responsive.
How can I make it responsive? Site link http://www.hdprodmcc.ae/

2nd
I change my site navigation to transparent

nav#site-navigation {
    background: transparent;
    border: 0;

but when i scroll down the page i want the background color to be black . What is a possible solution for this?

Thank You!

bumpp