Change the background colour of the header and drop down menu, on the mobile site. Possibly edit mobile site but not browser site

Site URL: https://www.thomasperceval.co.uk/

Hi, would greatly appreciate any help with this.

On my website, on the browser for desktop, the website looks fine and correct (image attached: 'desktop') There is my black writing (signature) logo on white background at the top, and above that, the menu tags for the different web pages of the website. 

But on the mobile site (image attached: 'mobile'), the header menu looks wrong. Because the logo in black writing is surrounded by a rectangle, which is then surrounded by a black area. 

I worked out that the only way to change this black area, to white, is by going into: design, styles, nav link color, and changing the colour to white.

But then, this changes the text at the top of the website which is supposed to be black. So nav link color, is the colour of the menus at the top of the page, but also the colour of this whole surround area and drop down menu on the mobile site.

On the mobile website, the header text at the top of the page, is all combined with a black area and drop down menu. 

This does not really look how I want, a little disappointed that there is this difference between the two sites. There is no way within the template to change it.

I am wondering if anyone can help?

I was hoping to be able to make the logo inverted on the mobile - white writing on black background. But keep the black writing on white background on the desktop version. Or otherwise, edit the menu on the mobile version so it has an 'outline' black lines instead of this integrated black menu.

I am totally new to this forum, but willing to learn.

Probably best to check out my website, on both mobile and browser, to see what I mean: www.thomasperceval.co.uk


Thanks a lot, free virtual donuts to anyone who can help!

Tom

You can add this to Home > Design > Custom CSS to add new image on mobile

@media screen and (max-width:640px) {
.nav-branding-upload-mobile-nav-logo .nav-mobile-site-title-link {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg) !important;
}
}

Replace with your image