Inverting my Nav Menu for pages with light background

Hi, I have 2 problems here:

1. may I know how can I invert my navigation menu for certain pages that have light background? 

This is an example of my page (https://www.enocoustic.com.sg/shop/p/spring-blade-4xkys), where I can't see my logo which is white on a white background, and when I hover over my menu, I can't see my links (green) which are the same colour as my navigation bar.

2. how can I reduce the space at the top of my product details?

You can add this code to Design > Custom CSS

section#pdp {
    padding-top: 0px;
}
body[class*="type-products"].view-item header#header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
.wm-active-mega-menu.view-item.collection-type-products div.header-nav-item a {
    color: white !important;
}

It works, thanks @tuanphan!

Just that when I hover over the nav bar, the logo remains black, how do I make it white when hover? 

It is also possible to make the logo my brand colour (green) instead of black?

It already white to me. CSS can't change logo color to blue

If you can give a blue color logo file, we can give code to replace current logo with blue logo