I am having trouble with the hamburger menu on my website.
I have a menu with a fixed positioned at the bottom of the view port. Once the hamburger menu is opened I would like a full screen menu to slide in from the right and cover the whole screen with the page links. On certain devices, the menu does not appear and only covers the size of the bottom nav bar. (The pages are hidden once opened, and does not slide in from the right). On my editor it seems to work fine but once I check it out an iPhone, the same problem occurs.
I would also like the different pages and the actual hamburger menu button to have an interaction once clicked. I would like the pages to slide one at a time from the right once the the menu is open and I would like the colour of the hamburger menu to be a different colour when open.
I tried figuring it out for the past few days and I am completely stuck. I am unsure whether I am missing something. Your help will be greatly appreciated.
This is a link to the site.