Mobile menu fine tuning

Shapely
1

I have a couple of questions needing assistance with regard to mobile menu.

domain is roxtonholdings.com

I have managed to make mobile menu sticky with the following css addition:

@media (max-width: 991px){
header#masthead {
position: fixed;
width: 100%;
z-index: 99;
}
}

which is great but this has caused a few issues that need resolving:

  1. To make sticky menu work on mobile I have to remove the following css addition;

[class*=“home”] header#masthead {position: absolute;z-index: 9999;
width: 100%;}

but this has the effect of dropping the background image down below the nav bar menu header on desktop view, when the code is put back the sticky menu does not work on home/front page but still works on other pages see roxtonholdings.com/xmile to see sticky menu is working but is not on home page.

  1. on pages the mobile code has had the effect of moving the page under the nav bar menu, I need to drop it down on all pages apart from the home page as the background is an image. How can I add the padding above without affecting the homepage?

  2. when the dropdown mobile menu hamburger is clicked it would normally drop the page down and allow the menu to be seen clearly without any interference, how can I have this working with keeping the sticky menu?

  3. is there anyway to collapse menu after selection when the menu links are to parallax sections on the home/front page?