1. different browser interpret CSS slightly differently - in your case specifically the custom CSS that you have added to create that positioning - I suggest that you create a browser specific custom css to deal with the inconsistencies (same CSS different values) to address that.
2. Use this code...
#rt-header, #rt-top {
z-index: 3;
}
3. responsive groupped menu? Please do a screengrab of your problem and annotate to make it clear.
This is how to create a custom CSS compatible with Gantry 4...
Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template as seen in template manager e.g. rt_fracture). GANTRY4 will automatically load this CSS file. If you wish, you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"
Regards, Mark.