Trying to make a header stationary

Permalink 3 users found helpful
I'm looking to upgrade my current website from 5.5 to 5.7, and in doing so, I would like to simplify and streamline.

So I just installed 5.7 to a development subdirectory on my website, and I'm using the default Elemental theme with the default Sunrise color scheme. This theme is perfect for what I want to do, except for one thing. Currently, the header scrolls with the rest of the page. What I need to do is keep that header stationary at the top of the page and let the body scroll without it.

So my question, I guess, is threefold --
-- Can this be done in Concrete5?
-- If so, can it be done in this theme?
-- And finally, if so, how exactly would I go about it? I would think I could designate this in CSS, but I don't know where.

Thanks in advance.

View Replies: View Best Answer
Cahueya replied on at Permalink Reply
Try adding this at the bottom of main.less in your themes CSS directory:

header {
position: fixed;
width: 100%;
z-index: 3;

This might do the trick, if I havent missed something.

But to make it really "clean", you should to a override of the original theme to not mess up everything when upgrading to the next 5.7 version.

Basic steps for using it as a new theme:
(pulled from:

1) Copy the 'concrete/themes/elemental' folder into 'application/themes/elementalcustom'
2) Open the 'application/themes/elementalcustom/description.txt' file and change the first line to 'Elementalcustom'. I also changed the second line to indicate that this was a copy of the core Elemental theme.
3) Open the 'application/themes/elementalcustom/css/main.less' and add a '../' to the path in line 6.
4) In main.less, change to: @import "../../../../concrete/css/build/core/include/mixins.less";
5) in page_theme.php change to: namespace Application\Theme\Elementalcustom;

*replace "elementalcustom" with the name of your custom theme.

Then try customizing :)
larryaltongarrett replied on at Permalink Reply
Makes sense that would work, but for whatever reason it doesn't.

Having looked throughout the theme files, I can't help but think that this might not be doable through CSS and might have to be done in one of the PHP files somewhere, but I know very little about PHP.

I would think we could designate that the header be fixed in the themes/elemental/default.php, or in themes/elemental/elements/header.php or header_top.php, but none of my programming experience, what little there has been, allows for the kind of self-referential programming that would be necessary if we used one of the header files.
Cahueya replied on at Permalink Reply

I just tried myself and the above code works. Try applying it in Chromes Dev tools and you'll see.

The fact that it does not work only shows that the changes are not applied when putting it into main.less like that.

So you could go on changing the header.less file in /build or append !important to your changes (thats dirty). Either way, changes like this should only be made when setting up elemental as a new theme. And dont forget the z-index or the page will scroll over your header.

And as always: delete the Cache :)
larryaltongarrett replied on at Permalink Reply
Okay, the code works, but now the question is where do I need to place this code in order to make it be called properly so it will work on the site if/when I take it live. I appreciate the help and the proof of concept for CSS, and that addresses whether or not this can be done in CSS in Concrete5, but it still doesn't help me get it working live.
Cahueya replied on at Permalink Best Answer Reply
Well, you can just leave it in place (it works as you see), or change the original files, which would be header.less, in the /build folder. This will save two lines of code.

But however you do it - you need to create a new theme from it or a future update might break your customization if you apply the changes directly to the elemental theme itself.
larryaltongarrett replied on at Permalink Reply
Okay... finally got it figured out, but now I need to make sure that my body content doesn't start below the header. Thank you so much for your help.
Cahueya replied on at Permalink Reply
Ok, good, now just add

main{padding-top: 145px;}

to your main.less (Line 73).

But I would rather make the header a little thinner, in the original elemental theme, it has bulky 30px paddings on top and bottom and this seems very thick for a "omnipresent header".

So if you change header height, you might also play around with the padding-top of <main> until it just fits.

Have fun trying :)
Xian replied on at Permalink Reply
Hi everyone
header {
position: fixed;
width: 100%;
z-index: 3;

Works fine in 5.7.4 and 5.75 as long as you are not logged in as administrator. Once you click, on page settings icon, the web design option can no longer be seen. It somehow hidden due to the formatting. It somehow breaks the format of the add content dialog box too.

Is there anything can be done about the code? Or perhaps can it be set so it checks to see if the admin top bar is activated. If the admin is logged in, ignore the custom css and if not, display it? Some thing like if / else command?

I'm not really an expert, just following the directions as posted and having problems troubleshooting it to find out what's conflicting with what. Any help is appreciated.

By the way, regarding creating a copy of the elemental theme, it might help people who come across this thread to mention that Elemental in 5.7.5 no longer has a description.txt. Even if you add one yourself, the description is not being pulled from it. The description is actually embedded in page_theme.php.

Thank you in advance for any help you can offer.
jakobfuchs replied on at Permalink Reply
I didn't read the messages above so my reply is only to this post.

First of all you should scope the selector to your theme page to not affect the Concrete5 editing interface:

.ccm-page header {
  position: fixed;

When the toolbar is visible the page wrapper div has the class .ccm-toolbar-visible, so you can do this:

.ccm-toolbar-visible header {
  position: static;

This assumes that the theme you are using has a div that wraps the whole page with the code snippet:

  <div class="<?php echo $c->getPageWrapperClass(); ?>">
Xian replied on at Permalink Reply
Excellent. Thank you so much. That solved the problem. I did have to add a z-index to it though otherwise the page would roll on top of the header bar instead of under it. Thanks again.
servright replied on at Permalink Reply
I feel a bit silly asking but(and of course late to the party!) but do I place these edits in the LESS files? i.e. header.less?

Also, where do I put

<div class="<?= $c->getPageWrapperClass() ?>">

Which file(s) does it go in? I don't see <body> within any files...

I'm using concrete5.7.5.6 with the elemental theme and SSHing to the server for editing.. I did manage to get the header fixed but I am assuming the wrapper is my missing link because all the pages(and side editing bar) are not wrapped properly and are tucked underneath the header.


Well, I ended up using the solution from above by editing main.less and adding

main{padding-top: 120px;}

My issue is still the top of the left toolbar "Page Settings" is still cut off when using this solution. Other than that I guess I just needed to read what had already been stated...


I guess I didn't look everywhere.. Just in case anyone else needed the help I found the <body> tag under my themes element/header_top.php file(I already had pageWrapperClass). I am assuming this may be different for each theme.
pdcouto replied on at Permalink Reply
Hi, just dropped by to say thanks to all.

As advised just added this on Page Settings > Design > Customize > Custom CSS > Apply to entire site

.ccm-page header {  position: fixed;}
main {padding-top: 140px;}

...and worked perfectly.

This on C5 8.2.1