I’m working my way through the menu tutorial. I’ve done everything up to page 10. On page 10, there is an instruction to change the CSS position from Relative to Absolute. OK, done, but then when I preview the hamburger menu, the menu becomes solid black and stretches downward forever even though it only has the original five elements. What have I done wrong? I’ve checked a number of the other settings and styles and cannot fix this problem.
Thanks.
Hi jwills,
The easiest way for me to see what is happening is if you send me a copy of your document via a file transfer service (e.g. Dropbox or WeTransfer). A download link is easier for me to deal with than a share invite.
You can email me via support at softpress dot com, or use the contact form on our website.
Another thing you could do would be to compare your document with the tutorial documents that we provide on our website.
Hamburger menus typically do fill the screen, and they’re normally displayed in an opaque colour. If that’s what you’re seeing, you’re not doing anything wrong.
Do hamburger menus typically push all other content off the page? That’s what is happening. When I click on the hamburger in Preview (Safari), all the page content is pushed down so I have to scroll to see any of it. It is beyond the bottom of the browser window.
Do hamburger menus typically push all other content off the page?
That depends upon the menu’s position. As the tutorial says (start of Changing the menu’s CSS Position):
"You may have noticed that when you open the hamburger menu in Xway’s Web view (or in a browser) it pushes other content down the page as it opens. Perhaps it would be neater if the menu simply opened in front of the other content.
“To fix this, go back to the Page view and change the menu’s CSS position from Relative to Absolute, using the Position popup in the Style section of the Box Inspector. Absolute items are positioned independently of other items, which makes them unsuitable for general layout—but this is precisely what we want in this case.”
In your original post, you said that you had changed the menu’s position, but your latest post suggests that you haven’t actually done this (or you subsequently undid it).
That’s just it. I followed the instructions (relative/absolute) and the behavior did not change. The selection in the Position pop-up makes absolutely no difference.
Other selections in that box – position – absolute; overflow – visible; opacity undefined; visibility visible; display normal; z-index 999
Try this:
Is that what you see?
Either way, the menu fills the screen. This is normal behaviour for hamburger menus.
“Is that what you see?”
Nope. It’s the same as before. The menu kicks the copy down. Well, the menu is displaying with the four menu items at the top, with tons of white space below (To see the text, I have to scroll down in the Safari window on my Apple Studio monitor; I’m not working on a tiny laptop screen!). Then the copy appears. NOTE: At the very bottom of that “menu box,” I see a partial line of the copy – only the bottom half of the copy line is showing – the text is cut in half vertically. Is that large “menu box” meant to be transparent? In other words, the menu may be displaying “in front” of the text, but the text is totally obscured by that large empty space.
Thanks,
Jonathan
I’ve attached that test document.
(Attachment test menu.xway.zip is missing)
The menu box isn’t meant to be transparent. It is intended to hide the existing content. If you’re navigating to a different page, you don’t need to see the page you’re navigating from. If you want to see the current page, you can close the menu. This is how hamburger menus work on Apple’s website, for example.
Apple use fixed position for their hamburger menus, so it’s not possible to scroll down and see other content. That’s also the case if you choose fixed position for an Xway menu (as suggested a little further in the tutorial).
If you really want your hamburger menu to behave differently, you can do that using CSS markup, but it’s probably a good idea to work through the rest of the tutorial before you get sidetracked into that.
Also, as I suggested earlier, if you want to check whether you’re doing anything wrong, you can compare your work with the finished tutorial documents on our website.
Well, the menu is displaying with the four menu items at the top, with tons of white space below (To see the text, I have to scroll down in the Safari window on my Apple Studio monitor; I’m not working on a tiny laptop screen!)
Hamburger menus are mainly intended for small/narrow screens. What you see on a 5K screen is not what you would see on a phone. You can get a closer approximation of what they look like on a phone by using responsive design mode in Safari.
I guess I just misunderstand what “normal” hamburger menu behavior is. Thanks for your input.