How to manage overlapping links and divs?
I have a page containing two divs: The first is the logo of the site, and it is mostly transparent. The second one is a navigation bar. These two divs are partially overlapping.
The problem is that the navigation bar is on top of the logo, and hiding part of it:
This can be solved by adding z-index value to the logo:
The problem now is that the logo is on top of the links of the navigation bar.
This means that hovering with the mouse on a link will actually be hovering on top of the logo and wouldn't trigger the link.
My question is if there is a way to solve this issue?
I thought of having another transparent bar on top of all, and this one will be the actual link.
This sounds very cumbersome: It will force me to include a div with no contextual meaning and also require some JS code to make the real links in the navigation bar below to change color upon hovering.
Is there a better way to accomplish this?