Navbar "Flyout style main menu" applies to all dropdown menus

@pautri
I try to replicate issue. I need some more information -
Are you user common navbar-id for menu?

Hi, the dropdown menu that I added to the page does not have any navbar-related IDs or classes, it's just this:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

The problem is that the css that gets added when enabling "Flyout style main menu" for the navbar also just operates on these dropdown-menu classes, rather than restricting it to the navbar.

@pautri
Thank you for explaining.
The issue is not appearing for me.

I want know, Did you create subtheme of "bootstrap_barrio"? or Are you using Bootstrap 5 - SASS Starter Kit →

Actually i am checking in Bootstrap 5 - SASS Starter Kit → .

thanks for having a look @ravi-kant
I'm using a Bootstrap 5 SASS subtheme but I verified with just the Bootstrap Barrio theme and the behaviour is the same.

When enabling "Flyout style main menu", the only thing that happens is that the "navigation.css" stylesheet gets added if I'm seeing it correctly. I'm copying the content of mine below. Does yours look different? Because I don't see how this would not apply to every other dropdown menu.

/**
 * @file
 * Enables Bootstrap 5 multi-level flyout
 */

/* Only for mobile */
@media (max-width: 767px) {

  nav.menu--main {
    margin-left: 16px;
    width: 100%;
    padding-bottom: 12px;
  }

  /* Enables first level dropdown from main nav links */
  a.nav-link .dropdown>.dropdown-menu.show {
      display: block;
      border: 0;
      margin-top: 5px !important;
  }

  ul.dropdown-menu {
    border: 0;
  }

  .dropdown-menu .menu-item--expanded>a:after {
    visibility: hidden;
  }

  ul.dropdown-menu.show li.menu-item--expanded>ul.dropdown-menu {
    display: block;
    border: 0;
  }

}

/* Only for non-mobile */
@media (min-width: 768px) {

  /* Enables first level dropdown from main nav links */
  .dropdown:hover>.dropdown-menu {
    display: block;
  }

}

/* Force manu items with no link to still use pointer */
span.nav-link {
  cursor: pointer;
}

.dropdown-menu .menu-item--expanded:hover>a:after {
  visibility: hidden;
}

.dropdown-menu .menu-item--expanded:hover {
  border-right: 1px solid #fff;
}

/* Enables next level dropdowns to go horizontal */
.dropdown-menu .menu-item--expanded>.dropdown-menu {
  top: 0px;
  left: 100%;
  margin-top: -1px;
  margin-left: 0px;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

/* Creates right arrow which vanishes on rollover/expansion */
.dropdown-menu .menu-item--expanded>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 7px;
  margin-right: -5px;
}

.dropdown-item {
  padding: 5px 15px;
}
/* Remove margin and padding around each flyout's containing UL, so that there is no "gap" where hover does not function, and flyouts vanish as you roll over the gap */
ul.dropdown-menu {
  padding: 0;
  margin: 0;
}

/* Make sure links in the active trail reverse out to white so that they do not diappear when the LIs highlight */
.dropdown-menu li.active>a {
  color: #fff;
}

@pautri
Is possible a short screen recording?

@ravi-kant see attached file.

This is the button I mentioned above inside a basic page, with "Flyout style main menu" enabled. It opens on hover, whereas it doesn't do that with "Flyout style main menu" disabled.

@pautri
The issue can resolved after remove space between Dropdown and Select menu box so that the dropdown will not remove till mouse hover on menu and dropdown,

This issue is not generating to me.

@ravi-kant the issue is not about the space, it's about the fact that the menu drops down on hover. It shouldn't do that in my opinion, normal behaviour is that it drops down on click. Enabling "Flyout style main menu" changes this behaviour, whereas the name suggests that it will only affect the main menu in the navbar. So either the name and placement of this setting should change, or the css should be more specific such that it only applies to the navbar.

I have restricted the dropdown menu to only appear in the main navigation according to the configuration settings. Please see the before and after images attached.

I have the same issue. I want the flyout effect only apply to the navbar. I have a sidebar menu on the Sidebar First region, and I don't want it to be dropdown on hover. How to fix it?