Offcanvas appearing on initial page load

[p-f-d-d]

Hello sorry perhaps this is a simple issue to resolve but whenever the page loads first on https://lesfestivalsdewallonie.be the offcanvas elements seem to appear. Its mainly noticeable on https://lesfestivalsdewallonie.be (homepage) and https://lesfestivalsdewallonie.be/programme/.

Any ideas why this is?

[vmitsaras]

The CSS-Classes are applied with js. Try to hide the Offcanvas-Elements on page load

<aside class='is-hidden js-offcanvas' id='...'>

.is-hidden { display:none!important }

$( document ).on( "create.offcanvas", function( event ){
       $( event.target ).removeClass('.is-hidden');
});

[p-f-d-d]

Thanks for the above, I applied this but the panels don't display - I can see the overlay being applied but the panel content remains as " display: none "

[vmitsaras]

Solution A:

Change/Add CSS and JS Files

CSS

<style type="text/css">
.is-hidden { display:none!important }
</style>

JS

<script>    
jQuery(document).ready(function($) {

  $('#calendrier').offcanvas({resize: false});
  $( document ).on( "create.offcanvas", function( event ){
       $( event.target ).removeClass('.is-hidden');
  });
  $(document).trigger("enhance");
});
</script>

Solution B:

Try to apply the CSS-Classes HTML

<aside class="is-hidden js-offcanvas" data-offcanvas-options='{ "modifiers": "right,overlay" }' id="calendrier">...
/* change to this*/
<aside class="js-offcanvas c-offcanvas c-offcanvas--right c-offcanvas--overlay is-closed" data-offcanvas-options='{ "modifiers": right,overlay" }" id="calendrier"> ...

[p-f-d-d]

Thanks! the css-class solution worked perfectly!