Hamburger Men Not Working On Certain Devices

Design help General
1

Hello,

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.

https://preview.webflow.com/preview/ivy-and-aspen?preview=121435b28fd03739ff02cb13befdd95e

Thank you!

2

I remember having full page menu issues as well. I did I work around by creating my own menu out of a div and slid it in and out on an interaction. The built in navbar settings seemed to get in the way.

like this one
https://preview.webflow.com/preview/vigilance?preview=154a84095178f1bbd316205badc331ea

probably will be faster than fighting with the navbar element. Nice hamburger menu effect. Might have to borrow that one in a future design.

Jeremy

3

Thank You, feel free.

I wanted to see if there was a way to do it without a custom Nav, but I guess this will be the only way.

Appreciate your help!

4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.