Mobile menu not visible

I have used your excellent “blue planet” theme for a number of sites – many thanks for it. However….

On all but one the mobile menu replacement works well, but I have one site where the menu entries are not visible on a mobile (android 4.4).

the one where it does not work is:

https://peacepalace.org.uk

and the one where it does work is:

https://changeofkey.org.uk

I have overidden the colours for the peacepalace one which I guess means I’ve messed it up in some way, but can’t see where – it works fine on a desktop (firefox and chrome).

Hope you can help..

Here is the relevant CSS I’ve used in the jetpack CSS edit:

.menu-top-menu-container {
vertical-align: top;
background: white;
line-height: 20px;
}

.nav-menu {
vertical-align: text-top;
margin: auto;
}

.menu-item {
vertical-align: text-top;
background: white;
margin: auto;
}

.blueplanet-nav li a {
border: 0 none;
color: #0083ca;
font-size: 12px;
font-weight: bold;
line-height: 12px;
padding: 0 9px;
text-transform: uppercase;
transition: all .3s ease 0;
white-space: normal;
max-width: 125px;
display: block;
text-decoration: none;
vertical-align: text-bottom;
text-align: center;
}

li.current-cat a, li.current_page_item a, li.current-menu-item a, li.current-cat a:link, li.current_page_item a:link, li.current-menu-item a:link, li.current-cat a:visited, li.current_page_item a:visited, li.current-menu-item a:visited {
color: #0083ca;
background: white;
}

.blueplanet-nav li a:hover {
background-color: white;
color: lightblue !important;
}

.blueplanet-nav ul.nav-menu,
.blueplanet-nav div.nav-menu > ul {
text-align: center;
width: 90%;
vertical-align: text-top;
}

Cheers Brian