Header bar won't go transparent!

[elizabethanneflynn]

Hi bar 1 in my header is set to have a transparent background. I’d like it to float over the video like this example:

https://wepresent.wetransfer.com/

I haven’t changed to text to white because the background is still white.

When I change the positioning from relative to absolute it disappears completely behind the video in bar 2.

Help?

[ruenel]

Hello @elizabethanneflynn,

Thanks for posting in!

Yes you will have to change the position to “Absolute”. And yes it will go behind the other bar. To make sure that the first bar will be on top, you will need to make sure that the z-index of the first is 9999 and the z-index of the second bar will only be 9998.

Hope this helps.

[elizabethanneflynn]

Hi! That totally helped! But now the menu is floating to the right, even though I have the bar set to full width. Any advice?

[rad]

Hi @elizabethanneflynn,

There something wrong with your current setup, I’ve been changing the flex setting and it’s not taking effect. The cause of that issue is this

.e130-1.x-bar-content {
    flex: 0 1 100%;
}

Have you added a custom CSS like that somewhere?

It should be this since that’s what I’ve been saving.

.e130-1.x-bar-content {
    flex: 0 1 auto;
}

Icons in the builder aren’t displaying too, seems to be blocked by your host security. Example http://staging.************.com/wp-content/themes/pro/cornerstone/assets/dist-app/svg/interface.svg?v=3.4.6

For the meantime and quick workaround, you can add this to your header CSS

.e130-1.x-bar-content {
    flex: 0 1 auto !important;
}

Thanks!

[elizabethanneflynn]

Oops I forgot I added custom css to try to get the bar to go transparent, turned it off and added your code and it worked.

• but i have noticed a glitch with the icons- so much so that I created a new menu because I had one where i could not turn icons off, or choose different ones.

Can you tell me how to resole issue with host security with icons?

[rad]

Hi @elizabethanneflynn,

It could be that your hosting doesn’t allow an SVG files, I recommend contacting them about the issue and they should fix it. Permission issues are something can’t override through codes.

Thanks!