I have a bootstrap based frontend theme and the page header set as sticky (https://getbootstrap.com/docs/5.3/helpers/position/#sticky-top). The item menus of the secondary toolbar are partially hidden by the page header if not scrolled and the secondary toolbar is completely hidden by the page header if scrolled:
Page not scrolled, toolbar menu overlapped, menu color changed for demonstration purpose.
Page scrolled, secondary toolbar overlapped (Customer logo blurred).
Install a bootstrap 5 based theme (like bootstrap_barrio) and apply the sticky-top class to the page header or apply the corresponding styles to the page header without any specific theme:
.sticky-top {
position: sticky;
top: 0;
z-index: $zindex-sticky;
}
The $zindex-sticky is 1020 according to https://getbootstrap.com/docs/5.3/layout/z-index/.
Set the z-index of the gin-secondary-toolbar--frontend class to a value higher than the conflicting values from the bootstrap theme i.e. 2000 or at least 1100.
Active
4.0
User interface
You might need to change the z-index of your sticky header.
I changed the z-index. But a Bootstrap still is widely used even in Drupal projects (see usage statistics for Bootstrap → , Barrio Bootstrap 5 Theme → , Bootstrap5 → and potentially upcoming Bootstrap Drupal CMS → themes) I would expect this to be correct out of the box.