# Concrete Toolbar Z-Index Issue

**URL:** https://forums.concretecms.org/t/concrete-toolbar-z-index-issue/6823
**Category:** Developing with Concrete
**Created:** [January 19, 2024, 9:31pm UTC](https://forums.concretecms.org/t/concrete-toolbar-z-index-issue/6823 "2024-01-19T21:31:41Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![leemchildress](https://forums.concretecms.org/user_avatar/forums.concretecms.org/leemchildress/32/3495_2.png) [@leemchildress](https://forums.concretecms.org/u/leemchildress)
#### Post date: [January 19, 2024, 9:31pm UTC](https://forums.concretecms.org/t/concrete-toolbar-z-index-issue/6823/1 "2024-01-19T21:31:41Z")

</div>

I’m using Concrete 9 and developing my first theme. My issue is when logged in as an admin the toolbar appears at the top of the page, but apparently has a lower z-index value than my site. For that reason when I start to scroll, the website covers the toolbar making it inaccessible.

Is there a way to create a custom css page that I can overwrite the z-index for the toolbar? (I don’t want to have to keep editing every time I update my version of Concrete). I’d change the z-index on my site, but the theme I am using is filled with z-index statements and I’m worried I’ll mess up the theme.

---

<div class="post-metadata">

### Author: ![TMDesigns](https://forums.concretecms.org/user_avatar/forums.concretecms.org/tmdesigns/32/4261_2.png) [@TMDesigns](https://forums.concretecms.org/u/TMDesigns)
#### Post date: [January 20, 2024, 11:14am UTC](https://forums.concretecms.org/t/concrete-toolbar-z-index-issue/6823/2 "2024-01-20T11:14:12Z")

</div>

Just inspect the admin tool bar find the class or I’d it uses then in your theme CSS just set it’s z-index with a really high value and add ! important on it.

---

<div class="post-metadata">

### Author: ![leemchildress](https://forums.concretecms.org/user_avatar/forums.concretecms.org/leemchildress/32/3495_2.png) [@leemchildress](https://forums.concretecms.org/u/leemchildress)
#### Post date: [January 20, 2024, 4:01pm UTC](https://forums.concretecms.org/t/concrete-toolbar-z-index-issue/6823/3 "2024-01-20T16:01:48Z")

</div>

Thanks. I have already tried that, and at least the tag I believe is the right one isn’t working. I’ll keep plugging away, but if anyone knows the correct css tag for the toolbar please let me know. This is driving me nuts.

---

<div class="post-metadata">

### Author: ![ConcreteOwl](https://forums.concretecms.org/user_avatar/forums.concretecms.org/concreteowl/32/5237_2.png) [@ConcreteOwl](https://forums.concretecms.org/u/ConcreteOwl)
#### Post date: [January 20, 2024, 5:18pm UTC](https://forums.concretecms.org/t/concrete-toolbar-z-index-issue/6823/4 "2024-01-20T17:18:12Z")

</div>

Create a css folder in the applications folder (application/css/)  
Next copy the cms.css file from concrete/css/ folder to the application/css/ folder (application/css/cms.css)  
Go to line 69 of the cms.css file and find ‘div#ccm-toolbar{background-color:#f7f7f7;border-bottom:1px solid #e9ecef;height:48px;left:0;position:fixed;top:0;width:100%;z-index:1000}’  
and change the z-index as you like.  
Now when you update your concrete core it will not overwrite your over-ride file.

---

<div class="post-metadata">

### Author: ![leemchildress](https://forums.concretecms.org/user_avatar/forums.concretecms.org/leemchildress/32/3495_2.png) [@leemchildress](https://forums.concretecms.org/u/leemchildress)
#### Post date: [January 20, 2024, 5:37pm UTC](https://forums.concretecms.org/t/concrete-toolbar-z-index-issue/6823/5 "2024-01-20T17:37:46Z")

</div>

You are beyond awesome!! Thank you so much. That worked perfectly.