# Elemental theme fix top navbar

**URL:** https://forums.concretecms.org/t/elemental-theme-fix-top-navbar/5959
**Category:** Using Concrete / Help
**Created:** [July 28, 2023, 11:49am UTC](https://forums.concretecms.org/t/elemental-theme-fix-top-navbar/5959 "2023-07-28T11:49:33Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![joaquinvaldez](https://forums.concretecms.org/user_avatar/forums.concretecms.org/joaquinvaldez/32/3524_2.png) [@joaquinvaldez](https://forums.concretecms.org/u/joaquinvaldez)
#### Post date: [July 28, 2023, 11:49am UTC](https://forums.concretecms.org/t/elemental-theme-fix-top-navbar/5959/1 "2023-07-28T11:49:33Z")

</div>

Hello! I have customized the Elemental theme and I am happy with things. The only thing I have a question about is how to make the navbar sticky. I have tried a few things and one worked, but then I lost the CMS tool bar when trying to edit the site.

Any help would be greatly appreciated!

Thank you!  
Joaquin

---

<div class="post-metadata">

### Author: ![EvanCooper](https://forums.concretecms.org/user_avatar/forums.concretecms.org/evancooper/32/4597_2.png) [@EvanCooper](https://forums.concretecms.org/u/EvanCooper)
#### Post date: [August 3, 2023, 10:18pm UTC](https://forums.concretecms.org/t/elemental-theme-fix-top-navbar/5959/2 "2023-08-03T22:18:23Z")

</div>

Hi @joaquinvaldez -

In general, to avoid “greedy” styles (i.e. styles that affect the Concrete CMS editing interface And your theme) you can preface your styles with:

`.ccm-page`

That will make sure they only target elements within your theme, and not the Concrete interface.

Hope that helps!

---

<div class="post-metadata">

### Author: ![joaquinvaldez](https://forums.concretecms.org/user_avatar/forums.concretecms.org/joaquinvaldez/32/3524_2.png) [@joaquinvaldez](https://forums.concretecms.org/u/joaquinvaldez)
#### Post date: [August 3, 2023, 10:37pm UTC](https://forums.concretecms.org/t/elemental-theme-fix-top-navbar/5959/3 "2023-08-03T22:37:26Z")

</div>

Thank you! So are you saying if I have a custom class called “sticky” and I only want it on the header I would add this to the header tag class=“ccm-page sticky” ?

Joaquin

---

<div class="post-metadata">

### Author: ![EvanCooper](https://forums.concretecms.org/user_avatar/forums.concretecms.org/evancooper/32/4597_2.png) [@EvanCooper](https://forums.concretecms.org/u/EvanCooper)
#### Post date: [August 3, 2023, 10:42pm UTC](https://forums.concretecms.org/t/elemental-theme-fix-top-navbar/5959/4 "2023-08-03T22:42:04Z")

</div>

Not quite - so the .ccm-page class is applied to an outer div around the whole theme, usually.

So in theory you’d do:  
`.ccm-page .sticky { /* cool styles here */ }`

---

<div class="post-metadata">

### Author: ![joaquinvaldez](https://forums.concretecms.org/user_avatar/forums.concretecms.org/joaquinvaldez/32/3524_2.png) [@joaquinvaldez](https://forums.concretecms.org/u/joaquinvaldez)
#### Post date: [August 3, 2023, 10:45pm UTC](https://forums.concretecms.org/t/elemental-theme-fix-top-navbar/5959/5 "2023-08-03T22:45:54Z")

</div>

Gotcha! I will try it out.

---

<div class="post-metadata">

### Author: ![joaquinvaldez](https://forums.concretecms.org/user_avatar/forums.concretecms.org/joaquinvaldez/32/3524_2.png) [@joaquinvaldez](https://forums.concretecms.org/u/joaquinvaldez)
#### Post date: [August 3, 2023, 10:47pm UTC](https://forums.concretecms.org/t/elemental-theme-fix-top-navbar/5959/6 "2023-08-03T22:47:35Z")

</div>

Thank you @EvanCooper !

---

<div class="post-metadata">

### Author: ![EvanCooper](https://forums.concretecms.org/user_avatar/forums.concretecms.org/evancooper/32/4597_2.png) [@EvanCooper](https://forums.concretecms.org/u/EvanCooper)
#### Post date: [August 10, 2023, 9:27pm UTC](https://forums.concretecms.org/t/elemental-theme-fix-top-navbar/5959/7 "2023-08-10T21:27:52Z")

</div>

You bet! Glad that worked 👍