Customizing Elemental Theme - Header Navigation
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-font-family: 'Droid Sans';
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,
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.
Thank you for the reply. I think that gets me started. I'll read through the documentation and watch the cast as well.
I guess what I'm really missing is understanding LESS. I found in css/build/header.less the navigation section:
content: ' ▶';
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.
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.