I have a hero video header setup on my site, which includes a sticky header that goes from transparent to solid on scroll - changing header logos and nav bar styles. I did this with CSS through cornerstone, but I’d like to know how I can get this done within the new X Pro Header Builder. See images for reference.
Hi There,
While this is certainly something that is not possible out of the box with the header and footer builders, it is intentional. In spending time with the new builders, you’ve undoubtedly seen first-hand the level of granularity given to users in choosing how to style elements at all levels. However, we have also taken time to not just throw a bunch of “low-level” options at people and call it a day. Everything is curated and designed in a way to give maximum customizability while also keeping the option set as manageable as possible.
One of the ways we’ve done this has to do with the colors you see throughout the builders. All elements have a base color that can be assigned to various pieces that are available (think backgrounds, borders, shadows, text color, et cetera). If elements can be interacted with (e.g. buttons), they will have a base color and an interaction color for all of these elements.
To achieve the exact effect you’re speaking to, where a bar starts transparent, and then changes to a background color on scroll, we would essentially have to offer two sets of base and interaction styles for every element you work with in a header. This is because many times users may start with the bar transparent on a dark hero image, so all element colors are designed with that in mind, and then it may switch to a lighter background on scroll, so all element colors would need to be adjusted accordingly.
Additionally, this doesn’t take into account other elements, like images. You would need to have some way to have two sets of logos potentially (one light, one dark), two sets of images if used as graphics in links, et cetera. As we weighed out the pros and cons of working to include something at this level in the builders, it felt potentially overwhelming to users find a convenient way to package all of that data management and have it presented well. Essentially, with the level of total control available for the bars as a whole, implementing this type of feature in the “right way” would have meant presenting our users with way more options than we felt comfortable with while keeping the tool as approachable as possible overall.
All that being said, there are certainly some alternatives you can explore to achieve this effect. 
When you have finished your bar, you can duplicate it, and set the second bar to be sticky and have a delayed reveal. This recreates the general effect minus the transition of the colors all happening inline. This was where we landed at for ourselves as a happy medium without bloating out the product for this one specialized effect.
The effect you’re going for is also easily achievable with a little custom CSS if you’re feeling up to it. When sticky bars become fixed, they have an “x-bar-fixed” class applied to them. You could use this class to style your own set of colors that should change on scroll very easily via your custom CSS inputs in the theme, or via a child theme.
Hopefully all of that helps to give a little more context on this. Thanks!
Thanks for the tip on using custom CSS to achieve this common effect. It is, however, surprising that with all the power built into the header builder that we can’t achieve this very common effect without resorting to custom CSS.
I feel that your reluctance to have two bases reflects a condescending view of your users and it is also inconsistent with other features you already offer. Let me please explain why.
You say it felt ‘potentially overwhelming to users’. That’s rather condescending because a Pro user already needs to be an advanced user. The header builder interface is complex and awkward to use. It is made moreso by your having invented an obscure bespoke vocabulary with terms like ‘partials’ and ‘particles’. You also require your users to grapple with flex. Flex is elegant and powerful but not for beginners. Nothing wrong with that, but it’s strange that you would think your advanced users are, in this case, too simple to grapple with the two sets of settings needed for a header in two different modes.
And here’s why your position is inconsistent: you already provide some separate settings for a sticky header. Why not finish the job? This requirement might offend your sense of engineering elegance, but it is a practical requirement. I can’t see how having to use custom CSS is consistent with the constant refrain from your team that you ‘curate’ complexity. And surely your ‘partials’ architecture should allow you to provide a second set of settings for the header in a different mode without difficulty. (Shouldn’t it?)
The bottom line is that the requirement for this functionality is so common that plenty of basic themes provide all the features needed for the two sets of colours, backgrounds and logo sizes, etc. that might be needed. I think your analysis that led to your decision not to include it in one of the most powerful themes is seriously faulty.
Hi there,
We spent a good amount of time thinking through this. The problem is actually in the depth of how much you can customize. Pro lets’s you style just about anything. So the idea is that we need to change a bar from having a light/dark state based on scroll.
How do you reconcile a second set of styling options for everything inside that bar? Once you change the background, you need to change the image, the navbar links, their hover states. It cascades into all the individual elements inside that bar. We’d need to give an entirely different set of controls for everything, which gets really complicated to preset in a visual interface without a sense of getting lost or confused.
We certainly understand the challenge, and we’ve not tabled the feature request compeltely. If we find a better solution down the road we will implement it, but for now @Joao’s two alternatives above are the best solutions at the moment for the desired effect.
Interesting that your engineering and visual interface makes dealing with this common requirement so difficult. Pro header builder does, I can see, many clever things. However, while you ruminate over a solution to something quite basic, I’ll go back to a theme and page builder that can do what I need easily.
Hey @paulherzlich,
Thank you for your feedback. Please stay tuned for updates to see the future features you can use.