That could be a possible solution. Written by a user in the German Joomla forum:

`@media (min-width: 768px) and (max-width: 991px) {
.navbar-expand-md .navbar-collapse:not(.show) {
display: none !important;
}
}

@media (max-width: 991px) {
.navbar-expand-md .navbar-toggler {
display: block !important;
}
}
`

Thanks @ChristineWk
This fix resolved the issue. However, it would be better if it can be implemented in the future directly in the joomla core.

@mariantanase

Unfortunately, I can't tell you how to proceed here. let's wait for more information

I notice that the issue is still present on the most recent nightly build, Joomla_4.2.0-beta1-dev-Development-Full_Package.

I don't know if it helps or not, but the same issue includes sidebars - they are not hidden in the 1024px mobile size, which is the iPad Pro 12.9 inch. It works in all other sizes properly.
I can also confirm that the menu issue is still a problem. I found the CSS here and that fixed things for me, but not the sidebar. You can hide the bar itself, but you cannot hide the container, so there's a huge white-bar in the iPad Pro 12.9.

I think it is a bug in the PR #36900
in line 18 in templates/cassiopeia/html/mod_menu/collapse-metismenu.php

-md in class and before Joomla 4.1.3 it was -lg

I think better is:

<nav class="navbar navbar-expand-lg" aria-label="<?php echo htmlspecialchars($module->title, ENT_QUOTES, 'UTF-8'); ?>">

Is this issue is still open? ,because adding some bootstrap classes will automatically resolve the issue i think

yes, feel free to submit a pull request

PR #40574 created

Closing as having a pull request. Please test #40574 . Thanks in advance.