Hamburger menu strange behaviour

Xway
1

Hi Jeremy,

while testing a website on an iPhone the following problem occured:

The menu of the website has got 12 items. If I hold the iPhone upright and point on the Hamburger menu, the twelve items enroll correctly. I can see all of them because I kept the vertical padding quite small.

When I put the iPhone sideways and do the same thing, I can only see the first 6 items, O.K. - but it is not possible to scroll down to see the other Hamburger items down below! I found out that it only works after scrolling down the page a bit before pointing on the Hamburger symbol.

What can I do?

Best, Ernst

2

Hi Ernst,

How is the menu positioned? What is its position according to the Position popup in the Style section of the Box Inspector?

3

Can you share a URL to your test site? I’ve created my own test site here, and I have no problems scrolling when my phone is in landscape orientation.

4

Hi Jeremy,

there is a header on top of the master pages, position popup in the Style section of the Box Inspector is set to relative, height is set to 45px. Then comes the menue, position popup in the Style section of the Box Inspector is set to sticky, Z-index to 999. My website is still work in progress, here is the url: https://www.estroer.de/home.html

Best, Ernst

5

Hi Ernst,

Thanks for the link. I can see what is happening, and I will fix it in an update, but I don’t have a simple workaround.

Essentially, this is happening because your menu bar is not at the top of the screen, and because Xway outputs some JavaScript that prevents a page from scrolling behind an open menu: in other situations, this prevents unnecessary scroll bars from appearing, but in situations like yours it prevents the menu from scrolling to the top of the screen after it is opened.

We will fix this soon.

If you’d like a quick-and-dirty solution in the meantime, it is possible to add some JavaScript that effectively disables the JavaScript that is causing this problem. Let me know if you want to do this.

6

Ah, I thought so. Great if you can fix it in an update. In the meantime, yes, why not the quick-and-dirty solution?

Thank you, as always

7

Quick-and-dirty solution:

  1. Open the JavaScript Markup section of the Page Inspector for the master page that contains the menu
  2. Choose Body from the popup at the top of this section
  3. Paste the following code:
const element = document.getElementById("xw-gn-menustate");

element("change", function(event)
{
   body.style.overflow = "";
});

When this is fixed properly, you can remove this code by clicking on the Use Master JavaScript Markup checkbox (unless you already added some other JavaScript there).

8

Alternatively:

I could give you a pre-release version of Xway 1.0.1, which fixes this problem.

We’re hoping to release this early next week.

1 Like
9

Wonderful Jeremy, that would be nice. I tried the code as you suggested but it didn’t seem to change anything.

10

Hi Jeremy,

awesome. Looking forward to the new version.

One more question, you write on Styling Links:

"Individual (text) links can be styled using the Text section of the Link Inspector, although it is often better to use default styles to do this. You can use the Default Styles section of the Box Inspector to define default link styles for each page in a document, or use the Default Styles section of the Page Inspector to define default link styles for a specific page. You can also use the Default Styles section of the Box Inspector to define default link styles for specific boxes.“

That means you can style links in different ways. Is there a hierarchy? If I define the styling for a specific page using Default Styles and then change the styling of a single line on that page using the text section - does this overwrite the the Default Style setting? Same with Default Style setting for each page and for a specific page?

Greetings, Ernst

11

Yes, individual styles override default styles in Xway.

For individual link styles, Xway ensures that these have a higher CSS “specificity” (more specific styles take precedence over less specific styles).

Generally, it should just work the way you would expect it to work: the style set on a specific paragraph overrides default styles for paragraphs generally, default styles for a box override default styles for a page, and so on.

It’s a good idea to use default styles rather than individual styles when this is possible and appropriate - this helps to ensure that a website has a consistent appearance and it also makes it easier to change that appearance.

I’ll send you a link to a pre-release version of Xway 1.0.1 shortly (just waiting for it to go through internal testing).