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?
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.
Why not put your opacity on the links instead?
I'm always up for networking with fellow web professionals. Connect with me on LinkedIn
if you like!
Are you trying to add some distance between the two? If so:
Get rid of the absolute and relative positioning first.
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.
Try this ...
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)