CSS to get a component on top of the Desktop Nav Bar

[MaximeBaker]

You can actually remove the will-change: transform of the main container, and it will allow components to be shown on top of the header.

main>div:nth-child(1) {
	will-change: auto !important;
}

/*Sticky Button Container when header is inline*/
#page-root:has(.inline-nav) .bell-top {
	position: sticky;
	top: -56px;
	z-index: 22;
	height: 3.5rem;
	margin-top: -3.5rem;
	padding-bottom: 3.5rem;
}

/*Sticky Button Container when header is 2 lines*/
#page-root:has(.bottom-nav) .bell-top {
	position: sticky;
	top: -112px;
	z-index: 22;
	height: 7rem;
	margin-top: -7rem;
	padding-bottom: 3.5rem;
}

/*Correction to adjust button position*/
#page-root:not(:has(.mobile-layer)) .bell-top button {
	top: 8px;
	right: 40px;
}

/*Insert Container*/
#page-root:has(.mobile-layer) .bell-top {
	position: sticky;
	top: -110px;
	margin-top: -110px;
	z-index: 22;
	height: 110px;
	padding-top: 70px;
}

.bell-top {
	margin: 0 -20px;
}

.bell-top,
.bell-top div {
	pointer-events: none !important;
}

.bell-top button {
	pointer-events:auto;
}

You need to add a button with these settings:

Settings

Style Property	Style Value
Style	Minimal
Width	Auto
Accent	Off
labels	Hide
Alignment	Right

And then, add the class bell-top to the button component.

---

And the best part? It’s fully responsive!