No menu navigation on Firefox & Safari

What happens when you switch to the original, unedited, parent theme?

When I switch back to the parent, it shows up… the styling is a bit off, but it does appear.

Well, that at least narrows the area of investigation down to your child theme. Have you tried validating your site’s markup & CSS when the child theme is active?
https://codex.www.ads-software.com/Validating_a_Website

I just validated both the HTML and CSS. The only HTML error was this:

Line 225, Column 10: The hgroup element is obsolete. To mark up subheadings, consider either just putting the subheading into a p element after the h1-h6 element containing the main heading, or else putting the subheading directly within the h1-h6 element containing the main heading, but separated from the main heading by punctuation and/or within, for example, a span class=”subheading” element with differentiated styling. To group headings and subheadings, alternative titles, or taglines, consider using the header or div elements.

As for CSS, there are a few errors with “.menu-toggle”, each saying:

Value Error : background-image top is not a color value )

Remove your negative margin that you’ve set on the navigation menu.
Negative margins will cause browser compatibility issues.

That worked! Thanks. The reason I had the negative margin in there was to reduce the amount of white space between the top of the page and the top of the header image; is there any way to do that again without using a negative margin?

The white image above the navigation is caused by the header image itself
https://2013.whitehallrow.com/wp-content/uploads/2013/04/cropped-header1.png

Sorry, I meant above the header image… if you hit CTRL+A while on the page, you’ll see what I mean.

Do you have Google Chrome?

Yes, I’m mainly using Chrome for development. I’ve tried inspecting the element, and changing the CSS accordingly, but I haven’t had any luck so far…

I right clicked on the space above your header image [screenshot]

Found there was padding on <header> [screenshot], use this CSS:

.site-header {
 padding-top: 0;
}

Also found that you have empty headings that are taking up space [screenshot], use this CSS;

.site-header hgroup {
 display: none;
}

Also found you had a margin top on your header image [screenshot], use this CSS;

img.header-image {
 margin-top: 0;
}

The rest of the white space is caused by your header image.

Excellent! Many thanks, looks a lot better now.