Bug Fix

Report and resolve reproducible Bootstrap 5.3.8 layout, component, and JavaScript regressions.

Dropdown menu clips inside sticky header
Bug Fix / opened 8 hours ago / 8 replies
Radomit Grigor
Bug Fix 8 hours ago

The dropdown menu inside a sticky Bootstrap 5.3.8 header is being clipped when the header uses a custom overflow rule. It happens on desktop Chromium and Safari after the latest template update.

.app-header {
  position: sticky;
  top: 0;
  overflow: hidden;
}

Expected behavior: the dropdown should render above the page content without being clipped by the sticky header container.

Kama Adisa
Maintainer 6 hours ago

Confirmed. This is caused by the header overflow rule, not by Bootstrap dropdown itself. The safest fix is to keep the header visible while moving the clipping behavior to a nested element that does not contain the dropdown.

Raphael Afzal
Staff 4 hours ago

A patch is queued for the forum and admin templates. If you need an immediate workaround, remove `overflow: hidden` from `.app-header` and apply clipping only to the brand/logo wrapper.

Boyce
Just now

Tested the workaround in Safari 18 and Chrome 126. Dropdowns render correctly again, including nested menus inside the fixed header.

Members only
Posting to the forum is only allowed for members with active accounts. Please sign in or sign up to post.
Leave a Reply
Dark Mode NEW
Adjust the appearance to reduce glare and give your eyes a break.
RTL Mode NEW
Flip the layout direction to support right-to-left languages.