# CSS to get a component on top of the Desktop Nav Bar
**URL:** https://community.glideapps.com/t/css-to-get-a-component-on-top-of-the-desktop-nav-bar/78283
**Category:** Ask for Help
**Created:** [December 2, 2024, 12:01am UTC](https://community.glideapps.com/t/css-to-get-a-component-on-top-of-the-desktop-nav-bar/78283 "2024-12-02T00:01:28Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@Atom](https://community.glideapps.com/u/Atom)
#### Post date: [December 2, 2024, 12:01am UTC](https://community.glideapps.com/t/css-to-get-a-component-on-top-of-the-desktop-nav-bar/78283/1 "2024-12-02T00:01:28Z")
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;
}
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [December 2, 2024, 11:06am UTC](https://community.glideapps.com/t/css-to-get-a-component-on-top-of-the-desktop-nav-bar/78283/2 "2024-12-02T11:06:07Z")
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**
```auto
/*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**
```auto
/*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;
}
```
---
### Author:  [@Atom](https://community.glideapps.com/u/Atom)
#### Post date: [December 3, 2024, 1:02am UTC](https://community.glideapps.com/t/css-to-get-a-component-on-top-of-the-desktop-nav-bar/78283/3 "2024-12-03T01:02:25Z")
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?
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [December 3, 2024, 3:10am UTC](https://community.glideapps.com/t/css-to-get-a-component-on-top-of-the-desktop-nav-bar/78283/4 "2024-12-03T03:10:23Z")
Have you turned off “compiled custom css” and enabled preview? Also make sure to use a container with accent style to wrap your button.
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [December 3, 2024, 3:36am UTC](https://community.glideapps.com/t/css-to-get-a-component-on-top-of-the-desktop-nav-bar/78283/5 "2024-12-03T03:36:11Z")
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.
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [December 6, 2024, 3:17am UTC](https://community.glideapps.com/t/css-to-get-a-component-on-top-of-the-desktop-nav-bar/78283/6 "2024-12-06T03:17:36Z")
Are you still experiencing other strange behavior? Let me know.
---
### Author:  [@Atom](https://community.glideapps.com/u/Atom)
#### Post date: [December 14, 2024, 2:39am UTC](https://community.glideapps.com/t/css-to-get-a-component-on-top-of-the-desktop-nav-bar/78283/7 "2024-12-14T02:39:16Z")
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.
---
### Author:  [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [December 14, 2024, 3:48am UTC](https://community.glideapps.com/t/css-to-get-a-component-on-top-of-the-desktop-nav-bar/78283/8 "2024-12-14T03:48:36Z")
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.
```css
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!**
---
### Author:  [@system](https://community.glideapps.com/u/system)
#### Post date: [December 21, 2024, 3:49am UTC](https://community.glideapps.com/t/css-to-get-a-component-on-top-of-the-desktop-nav-bar/78283/9 "2024-12-21T03:49:32Z")
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.