Interact with content behind transparent header

Support
#1

Hey, there.

Running into an issue with a dropdown header. The bar within the header that contains the dropdown menu option is transparent. When a user is within the area of the transparent bar, they are unable to interact with the content on the page. I imagine this is due to the z-index of the header itself?

Is there a way to structure this so that actions can reach the main page through the header?

Here is a short clip of the problem I’m experiencing: https://youtu.be/ge6ESrq6CMQ. You’ll see that I have some CSS hover animations setup and when I hover the cursor on an element with the animation but within the area of the header, it doesn’t execute.

#2

Hello Alek,

Thanks for asking. :slight_smile:

This looks like a issue related with z-index property. Please reduce the z-index value of the first Bar and let’s enter 1 as z-index value and that should fix the problem.

Thanks.

#3

Oh my… that was embarrassingly easy for you to fix.

Sorry for wasting your time! :stuck_out_tongue_winking_eye:

I appreciate the help!

#4

So that seems to fix the issue for the main page content, but I’m still encountering the problem within the hero header. I’ve reduced the z-index of both desktop and mobile hero headers to 0 so that the dropdown appears on top of it on scroll.

Any ideas for that?

#5

Hello ALek,

Where can we find the header header? Just keep in mind that your bar is set to be fixed or sticky at the top. The z-index of the bar must be at least 999 so that it will stay on the top layer and it will be clickable. Any layer behind the bar will not be clickable. Keep in mind that any element that is clickable must be on top of any other layers or bar or sections.

Hope this helps.

#6

I guess it’s not really a hero header, but the top section of the website on the homepage with the logo and tagline that fills the viewport.

I changed the z-index on the sticky bar to 1, per @Prasant 's suggestion above. That fixed the original problem in the content of the page, but not in the header area. I also tried making both bars the same z-index but put the sticky bar behind the main bar.

#7

Hi Alek,

These seems to be not a simple z-index issue, because if we set the second bar (hero/banner) z-index to 2, then it will be layered above the Bar 1 but now the menu is not visible. Actually your menu is not working inside the body area.

Please provide us login credentials in a secure note so we can take a closer look.

Thanks,

#9

Hey Alek,

What seems to be the issue of your header? The sticky bar should always be on top which would have the higher z-index than any other bars so that it will be the topmost layer and not behind any bar. Could you please explain a little further on what you are experiencing in the header?

Thanks.

#10

The user can’t interact with the site if it’s within the height of the stick bar, even though the user can’t see the sticky bar because it’s transparent.

For example, on mobile if a user want to press a button near the top of the screen the won’t be able to if it’s high enough that it’s within that space.

The goal is to have that dropdown navigation button clickable and always on top, but not restrict where users can interact with the page behind the sticky bar. Does that make sense?

#11

Hello Alek,

In you header, you added a sticky bar. From the name itself, there would be a bar across the header to display your icon. All the contents goes behind this sticky bar as you scroll the page down. If what you have in mind is to be able to display the contents not by going behind this bar, then you do not actually need a bar. What you need is the icon in a fixed position to the right side of the page.

To resolve this, please edit your header and add this custom css:

div#nav {
    max-width: 96px;
    right: 0;
}

You can increase the maximum width if you want to have some extra space on the right side of the icon.

We would loved to know if this has work for you. Thank you.

#12

Looks like this solved the problem!

Thanks so much for the assistance.

#13

You’re welcome.

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.