on Header component there is an toggle button , its visible on small screens only..
after click on its open a right modal..
<div class="
app-header-menu
app-header-mobile-drawer
align-items-stretch
" data-kt-drawer="true" data-kt-drawer-name="app-header-menu" data-kt-drawer-activate="{default: true, lg: false}"
data-kt-drawer-overlay="true" data-kt-drawer-width="225px" data-kt-drawer-direction="end"
data-kt-drawer-toggle="#kt_app_header_menu_toggle" data-kt-swapper="true"
data-kt-swapper-mode="{default: 'append', lg: 'prepend'}"
data-kt-swapper-parent="{default: '#kt_app_body', lg: '#kt_app_header_wrapper'}">
the overlay not working as expected becouse of css z-index..
in DrawerComponent function _createOverlay will find the element and update the z-index css value to 109 but it's not rendered right
the problem exist after creating new project (demo 1) ... the online demo1 works
the the project not rendering the overlay
i fixed it in css file and change the z-index value to 1 , it will updated to 0 in _createOverlay function.. but i dont know if it is the right way and i dont know why in your online demo1 its works with the same css values
Hi Naji,
Apologies for the delay.
Could you try hardcoding the elementZIndex value for debugging to verify if it's being retrieved correctly?
the elementZIndex value retrieved correctly, but the problem with rendering the drawer-overlay ..
by the way , it's the same problem i post here : https://devs.keenthemes.com/question/metronic-8-header-menu-is-disabled-when-i-open-it-on-mobile-size