Sorry for the confusion. 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. Here’s an example
.x-bar-fixed {
background-color: red !important;
}
Regarding the mobile sticky bar, this is a known issue which currently does not have an official solution.
For now, you can give an ID to your mobile header then give it a top position property of 0.
Tested that on my end and it works. https://youtu.be/EP-J7rN9zNA
For the sub-links not showing, please check if you’ve enabled Content Scrolling of our Bar. It needs to be disabled.
Hopefully all of that helps to give a little more context on this. Thanks!
. I got the sub-menu fixed thank you very much for that. As for the transparency, and mobile headers I can’t seem to get them to work. I’m also not very good at coding so that could be the problem. I tried to send my login information but I do not know how to make this information private so that others can’t view it.
