Header only visible on hover

[nblund]

Hi there.

I have one header with multiple bars. One bar is loading on front page, which works fine. Another on all other pages (screen size 768px and up). The latter header (all other pages) doesn’t display, only occasionally when I hover over a menu item. What is wrong, please?

Login credentials and link to video in secure note. Thanks.

[ruenel]

Hello @nblund,

The video cannot be viewed.

Please edit your custom header and check your “Hide During Breakpoint” options.

You may also need to check the z-index of each Bar element. The other has 9980, 9976 and 9999. The greater the number, it means it will be the one displayed on the top layer. All others will be behind that Bar element.

Best Regards.

[nblund]

Hi @ruenel,

As you know the issue relates to the header appearing on all pages but the front page and only on screen resolutions above 767px.

I checked the “Hide During Breakpoint” and z-index settings, and I believe they are set as they should be (the different bars.

I also tried deleting the bars one-by-one, which had no effect.

Please, see new videolink in secure note. Thanks.

[christian]

Hey @nblund,

The header does not show up on my end at all. It’s because of the Mix Blend Mode applied to the Bar. Set the Mix Blend Mode to Normal and make sure to clear all caches including the browser cache and the Style Cache.

[nblund]

Thanks so much !

[ruenel]

You’re welcome.