# 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:** 1\
**Showing post:** 8

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@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")

</div>

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:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/4/54a1d3b9f7202eeb19e93266ed43b947353d3460.png)  
**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.

* * *

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/4/d491401531130eec2cfe0490d05af97559ca7f86.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/e/5e0cbf47f98511ce2967208ddf19bbd323b45e51.png)

And the best part? **It’s fully responsive!**

---

_[View the full topic](https://community.glideapps.com/t/css-to-get-a-component-on-top-of-the-desktop-nav-bar/78283)._