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

[Atom]

Has anyone figured out a way to get elements to appear on top of the default navigation on desktop? I’ve tried a ridiculous amount of combinations without any luck.

(Trying to get the Blue Bell button with .notifBtn class to appear ABOVE the header)

I know I’m able to create my own nav bar with a custom collection, but I’m trying to do it with the native header. Code RN:

.notifBtn {
position: absolute !important;
top: 40px;
margin-top: 180px;
padding-right: 60px;
z-index: 99999 !important;
}
#main-root {
overflow: visible !important;
}
#header {
z-index: 9 !important;
}
#nav-root {
overflow: visible !important;
display: flex !important;
position: relative !important;
margin-top: 100px !important;
z-index: 6 !important;
}

[Himaladin]

Your bell can only be placed after the profile tab if you still want to keep the native navigation, not before.

Please try the full code which also includes the mobile view code. Let me know if there is still strange behavior.

1. Desktop

/*Reduce total width by 86px*/
#page-root:has(.notif-container) #nav-root {
    width: calc(100% - 86px);
}
/*Limit width when full screen*/
#page-root:has(.notif-container) #nav-root > div{
max-width:1174px;
}
/* Setting profile padding*/
#page-root:has(.notif-container) #nav-root > div > div {
    padding-right: 0px;
}
/*Sticky Button Container when header is inline*/
#page-root:has(.inline-nav) .notif-container   {
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) .notif-container   {
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)) .notif-container button {
top: -8px;
padding-right:0;
}

2. Mobile

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

/*Reduce total width by 56px*/
#page-root:has(.mobile-layer):has(.notif-container) #nav-root {
 width: calc(100% - 56px);
}

/*Set 3 columns into 2 columns*/
#page-root:has(.mobile-layer):has(.notif-container) #nav-root header > div {
 grid-template-columns: 56px 1fr;
}

[Atom]

Still getting some weird behavior on Desktop with the method provided:

I was trying to get the button to work with position absolute and a higher z-index than the header, but it doesn’t work. Is it because of the stacking context?

[Himaladin]

Have you turned off “compiled custom css” and enabled preview? Also make sure to use a container with accent style to wrap your button.

[Himaladin]

I edited the previous code a bit because the container is not tall enough if it has many navigation buttons. Here it turns out that the navigation turns into 2 rows. It is indeed quite complex to handle this navigation part.

[Himaladin]

Are you still experiencing other strange behavior? Let me know.

[Atom]

It seems to be working alright, however the limitation of the button only being able to be placed to the right is unfortunate.

Me and Maxime are trying to work out a more robust solution and will post back with the results.

[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!