Feature request: sticky header styling options

Currently you have to write some custom CSS to get separate styling for headers that become sticky. However, wouldn’t it make sense to include some native options for sticky header styling?

2 Likes

Was thinking about the exact same thing the last time I had encountered this!

A separate, style-able ‘isSticky’ state for the background would be nice. For example, if you want the header bg to be transparent while showing your hero section and let it have a background color as soon as you scroll down.

2 Likes

I agree it would be nice. It would be nice to have a similar state styling like “bricks” where :hover is it’s own selectable and when selected any changes to the controls only affect when you are hovering over an element. I’m not sure our solution would look like that, but I’ll keep some thoughts on it. Have a great weekend.

4 Likes

That would be amazing. Would that mean that other states like :active, :focused, etc. can be included too?

2 Likes

:active and :hover might work a bit different since our interaction controls for color sort of already touch on that. But yes it would touch on various states like :focused. It’s a larger project though since the elements in Cornerstone aren’t just single elements outputted so targeting those states to our controls might be a little difficult. It would be cool to see this in Cornerstone though.

Any updates on this? Recently had a project where this would’ve been very useful – once again :grin:

Not really. I have some ideas on how to get the same controls to show up for different actions like in styling :hover. But I think what were going to do first is have a section in Theme Options that lets you control the Elements default values. So if you had a dark themed site, you could change the text and headlines default colors to White speeding up site creation and removing the need for Components for every element. This same system would translate to changing styles based on state like :hover.

1 Like