Customizing Elemental Theme - Header Navigation

Hello, I am new to concrete5. We have 5.7 installed. We have copied the elemental theme to applications/themes, and started to do some customization.

In the folder css/presets I am able to copy one of the presets to my own, and edit it. I see the following options for navigation:

// Top Header - Main Navigation */
@header-navigation-type-color: #0000cc;
@header-navigation-type-font-size: 1.2em;
@header-navigation-type-font-weight: 1.0em;
@header-navigation-type-font-family: 'Droid Sans';
@header-navigation-type-text-transform: none;

@header-navigation-hover-color: #0000cc;
@header-navigation-menu-background-color: #ffffff;
@header-navigation-menu-border-color: #edf2f3;
@header-navigation-menu-background-hover-color: #ffffff;
@header-navigation-menu-text-color: #0000cc;
@header-navigation-menu-text-hover-color: #0099ff;

Are these the only options there are? I would like background of a clicked item to change, or its color to change. All I can see here is that I can change its hover color, but not the "clicked" color. Is that possible with this theme, or do I need to start from scratch?

Can someone explain to me how the setting in css/presents percolates up to the actual code? I can trace it to the css/styles.xml page, but I'm wondering where to go from there?

Thanks for any insight you can offer,

View Replies: View Best Answer
WebcentricLtd replied on at Permalink Best Answer Reply
Hi Heather,

you can add as many new customisable styles as you want to.

you add your style variable to:


you instantiate it as a customisable style in


and then you apply it to the element you want in the less files under


The less files are normally logically names for the area of the theme they pertain to.

Does that make sense? The documentation is really quite good on the subject and once you start doing it it all quickly falls into place.
HeatherMyers replied on at Permalink Reply

Thank you for the reply. I think that gets me started. I'll read through the documentation and watch the cast as well.

HeatherMyers replied on at Permalink Reply

I guess what I'm really missing is understanding LESS. I found in css/build/header.less the navigation section:

nav {
&:after {
content: ' ▶';
&:hover {
&:after {

ul {
a {
padding-right: 40px;
font-family: @header-navigation-type-font-family;
font-size: @header-navigation-type-font-size;
font-weight: @header-navigation-type-font-weight;
color: @header-navigation-type-color;
text-transform: @header-navigation-type-text-transform;

&:hover {
color: @header-navigation-hover-color;
text-decoration: none;

and I can see there the "hover color" is applied in the &:hover section, but I have no clue as to what terms I need to add a "clicked" section. Actually I think this is the "active" tag...

I think I have the background figured out, just trying to understand how to set an active color. Thank you for your help again.

WebcentricLtd replied on at Permalink Reply
if you're not up to speed with LESS yet then you can just add standard CSS into the less file.

Basically you'd be looking at adding a :visited on the element you want and using the color variable.
HeatherMyers replied on at Permalink Reply
Thanks, I think I'm starting to get it, looks like I really need to come up to speed on LESS, CSS, etc to fully understand how to customize concrete5 themes.

Baby steps!