@pautri

I'm having the same issue, from the UI it looks like there are some circular dependencies, but indeed not in the .info.yml files...

@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.

@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.

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;
}

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 → created an issue.

Patch #11 works fine for me on a clean 10.1.3 site. The cache needs to be cleared though before the error disappears. I'm also getting the error mentioned in #13 if I add an empty tab section, so one should add blocks to it straight away before saving the layout. I suppose an extra check is needed to test wether any blocks are present.