Site Navigation Adjustment

Good Day!
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;

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

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!