If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

How to manage overlapping links and divs?

Hi,

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:http://jsbin.com/oDAcodO/2/edit
This can be solved by adding z-index value to the logo:http://jsbin.com/oDAcodO/3/edit
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.

I can't see your problem, because the links go to a development environment (which I am not familiar with) instead of the output web site. Anyway, If you don't want the logo to mask the nav bar, and you don't want the nav bar to overlay the logo, don't overlap them! Simple.

Do you want the nav bar under the site logo? Assuming this is the case, set the body width to 500px and #site-logo no width. It will take the width of its parent element. Then the nav would be below the logo bar. Again, drop the positioning for this to work.