Could you try this custom CSS code?
.t4-offcanvas .t4-off-canvas-header .close {
color: #fff;
opacity: 1;
}
.t4-offcanvas .t4-off-canvas-header .close:hover, .t4-offcanvas .t4-off-canvas-header .close:active, .t4-offcanvas .t4-off-canvas-header .close:focus {
background-color: var(--color-primary);
}
.t4-offcanvas .t4-off-canvas-header .close:hover span, .t4-offcanvas .t4-off-canvas-header .close:active span, .t4-offcanvas .t4-off-canvas-header .close:focus span {
color: #fff !important;
}
.t4-offcanvas .t4-off-canvas-body .navbar .nav-item.parent .dropdown-menu {
padding: 0;
}
.t4-offcanvas .t4-off-canvas-body .navbar .nav-item.parent .dropdown-menu .nav-item {
padding-left: 18px;
}
.t4-offcanvas .t4-off-canvas-body .navbar .nav-item.parent .dropdown-menu .nav-item .dropdown-item {
white-space: normal;
}
.t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle {
right: 23px;
}