Responsive Design Question

[Name Trader]

OK. I'm trying to make one of my old websites responsive. I'm using the free Theme, Grayscale from Stop Bootstrap. I've got the basic layout down but have some questions.

1 On the Desktop, the menu (4 items) at the top of the page appears on the top right, using Firefox. And on the Top Left, using Chromium (Chrome for Linux).
2 On the Tablet, the same menu appears on the top left. Using both Firefox and the Android Browser.
3 On the Smartphone, the same menu, appears vertically, but covers about 2/3rds of the home page, instead of being above it, as you, or I, would expect it to be. Using Firefox or Android Browser

The website, with this early basic testing form, appears to be working with this one page design, with the limitations above, on all platforms.

My questions are
1. Will this pass the Google tests for a responsive design (url for test site wanted)
2. Why is there a discrepancy with where the menu is displayed between device and browser. *
3. Is there any way to adjust the code so the menu appears above the home page rather than covering it, on the smartphones.

* I haven't got the latest Firefox installed on my Desktop. I'm going to try that test after this post.

 

[Name Trader]

OK. It looks like my FireFox version hasn't been updated thru the Linux distribution channel yet. So I suppose it is possible that this is why it'd display the menu on the top right. But it seems strange, to me.

 

[Name Trader]

OK. I found the Google test page, and it says it is mobile friendly and shows the website as #3 above with the menu covering the home page. Is there any way around that problem?

 

[Name Trader]

WTF. Now the same old Firefox version on my Desktop is now showing the menu on the top left. For the last day it's been on the top right. And I've cleared my cache on almost every time I've visited the website.

 

[Name Trader]

So the only question left is the menu covering the home page on the smartphone? Can anything be done about that?