Transparent Header - Help

[ifkda]

Hi there,

I’ve tried to make my header transparent via the customiser & also by doing it in the header section however, it doesn’t seem like it’s worked. Is there a way I can achieve this sort of affect?

If I place an image and set it to the background section of section one, will it apply it to the header as well? Or how can I make the image go underneath the header?

URL: https://basedcreative.com

[Joao]

Hi There,

As you are using the header builder the settings on Theme Options > Header won´t apply to your header.

Your bar is already transparent if you would like it to overlap your content.

Go to your Header Builder > Select your header > Bar > Change from position relative to absolute.

Hope it helps

[alexlee]

Hi, is this only for Pro?

How do I do the same for Integrity stack?

Thanks,
Alex

[ruenel]

Hey Alex,

The suggested solution above is for Pro theme. If you are using X theme with Integrity stack, please go to X > Launch > Options > Header > Navbar and set the “Navbar Position” as Fixed Top. And then, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.home .x-navbar {
  background-color: transparent !important;
}

.home .x-navbar.x-navbar-fixed-top {
  background-color: rgba(255,255,255,0.35) !important;
}

Hope this helps. Please let us know how it goes.

[alexlee]

The header is transparent but how do I make the image in section 1 reside below it?
And also, can I make it turn back to coloured once it scrolls pass a certain pixel?

[Joao]

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.

1. 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 transparent bar should be set to position absolute while the second, relative.

2. 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!