Header blocking elements underneath it

Hello everybody,

I have a problem with my header. My header is always displayed and floats horizontally over the page. Part of it is the user name (in the right top corner), and if you hover it, I conditioned a group to show up under the user name. This group, with links to the profile of the user and a logout button, then shows up under the main bar of the header. This image shows what’s happening:


However, the header is of course as wide and tall as the main bar and the dropdown-group combined. This means that the transparant grey part of the header on the left bottom (which is more than half of the total header) is also part of it. The problem is that, since the header is in front of the other elements of the pages of my app, this useless grey transparent part blocks elements underneath it. So, while I want the white parts of my header (with the logo, green button and user info) to block elements underneath, I don’t want this to be the case with the grey part.
How can I fix this? Is there a way to condition a part of the header to not block the user from clicking elements underneath it?

Thanks a lot in advance!

1 Like

Reduce the height on the floating bar page to be the exact height of the actual bar. Replace the user menu with a focus group.

That’s it

2 Likes

Perfect, that did it for me! Thanks Ali!

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.