Feature Request: Option to load off-canvas element before body, instead of after

Support
#1

There is a very annoying usability issue with X/Cornerstone regarding off-canvas elements being unusable until the page is fully loaded. This is especially noticeable when using an off-canvas mobile navigation. On mobile, often the page can take a while to load, and even though the mobile menu anchor element has loaded and is visible to the user, it is not clickable until the entire page finished loading, making it impossible to access the navigation menu during this time.

This can be incredibly frustrating and confusing for visitors to a website, especially on mobile, when the user is often trying to quickly find the information they are looking for.

It would be great if there was an option to have certain off-canvas elements loaded before the body instead of after. I’m not sure if this would be the only change needed to solve the problem. Perhaps the Javascript necessary for activating the off-canvas element would also need to be rewritten or repositioned on the page in order to ensure that the modal could be activated as soon as the modal anchor/trigger was visible to the user.

Additionally, I’ve noticed that accordions also do not function until the entire page is fully loaded. Perhaps there is something that can be done about that as well??

Thank you for your consideration.

#2

Hello @adaptifyDesigns,

Thanks for writing in!

What you are trying to do is not possible. To know why, kindly check this out first:

<html>
<head>
  <title>Title of the document</title>
</head>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>

The code above is the valid and correct HTML structure of the page. All the elements of the page should be placed within the <body> tag. You CANNOT add any element before or after the body tag.

Please be advised that by WordPress standards, the necessary styles and scripts needs to be loaded properly and in a right way. Most of the styling is loaded in the header while the scripts are in the footer. This is why when the page is loaded, it has all the stylings and then as soon as the loading of the page is complete (along with the scripts), then that is the time the menu or collapsing/expanding the elements on the page will work. You may need to take a look at this articles first to fully understand how the styling and scripts were loaded in WordPress:

Optimize your site is one way of make sure that the page will load fast. You can also add a page loader so that the site will only display once it is fully loaded in your browser. If you have not optimize your site, we highly recommend checking out these documentation articles first:

We also have tips and tutorial videos here to optimize the site:

#3

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