Offcanvas menu width only for mobile

[erichstark]

I find out, that style for offcanvas menu width is applied everytime

		.js-hiraku-offcanvas-sidebar-right,
		.js-hiraku-offcanvas-sidebar-left {
			width: 80% !important;
		}
		.js-hiraku-offcanvas-body-right {
			transform: translateX(-80%) !important;
		}
		.js-hiraku-offcanvas-body-left {
			transform: translateX(80%) !important;
		}

I think it should be only for mobile, because it can brake main navigation on desktop.

[steelydylan]

Hi @erichstark

You should use breakpoint option for that

This is the example code.

new Hiraku('.js-hiraku', {
breakpoint: 780
});
``

[erichstark]

Hi,

actually I did have.

new Hiraku('.js-offcanvas-left', {
  btn: '.js-offcanvas-btn-left',
  fixedHeader: '.js-fixed-header',
  direction: 'left',
  breakpoint: 767,
  width: '80%'
});

new Hiraku('.js-offcanvas-right', {
  btn: '.js-offcanvas-btn-right',
  fixedHeader: '.js-fixed-header',
  direction: 'right',
  breakpoint: 767,
  width: '80%'
});