I use the menu icon for tablet, and both phone modes and it works on tablet mode but on both phone modes when I click on it, it just draws a white box around the menu icon but the menu won’t open. If I look on a real phone, the menu shows up way down in the body of the site and overlays over other text. I’ve tried moving the icon around inside the navbar container and playing with some of the settings for the menu icon but nothing changes. What’s happening?
I discovered something, the mobile I have the position in the class settings set to scroll (auto) instead of fixed because the navbar takes up too much room on a mobile and needs to scroll out of the way. So I guess menus always have to be fixed for the menu to work?
It is not necessary that mobile menu has a fixed position. In your situation you can make navbar position: absolute.
Also there is minor issue with positioning menu-links inside the mobile menu.
Thank you so much Anna for taking the time to create the video. Sorry for the delayed response, I got pulled to other tasks and just now got to work on this. Your tips did the trick and the site works much better now on the mobile.
It seems that the original problem I was having with the menu not working when I tested it was related to being sure to first close the menu before going to the live mode. Otherwise the menu just won’t open. I think this probably caused it not to work on the phone as well (showing up all weird in the middle of the screen). I am now in the habit of closing the menus first before going on to other actions (or publishing) and that seemed to clear up the bad behavior.