[Solved] Menu Z-index breaks links

[zippy1990]

Hello everyone,

Currently I’m finishing up a website I’ve been working on which is: (http://www.catteryamisu.nl “Cattery Amisu”)

The problem is that my menu needs a z-index to be on top of the header, but doing so breaks all the links in the content. (Mailto:, hyperlinks and banner links which are on the “Links” page.)

You can find a live example here: http://codepen.io/anon/pen/hqJcj Which is an example of the contact page where the mail address should be clickable. (Note that when you double click the menu buttons are selected)

Here is the CSS of the menu:

menu {

margin: 0 -90px;
text-align: center;

}

menu ul {

list-style-type: none;
margin: 0;
padding: 0;
position:fixed;
top: 20px; bottom: 0; left: 0; right: 0;
z-index:10;

}

menu li {

display:inline;
padding: 3px;

}

/* layout for the menu */

`.menu {

    -moz-box-shadow: 0px 1px 1px 0px rgba(100,100,100, 0.8);
-webkit-box-shadow: 0px 1px 1px 0px rgba(100,100,100, 0.8);
box-shadow: 0px 1px 1px 0px rgba(100,100,100, 0.8);
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
text-indent:0px;
display:inline-block;
color:#5e5e5e;
font-family:Arial;
font-size:17px;
font-weight:bold;
font-style:normal;
height:40px;
line-height:40px;
width:120px;
text-decoration:none;
text-align:center;
text-shadow:0.5px 0.5px 0px rgba(255,255,255, 0.7);  }`

Taking away the z-index obviously fixes the issue but puts the menu behind the header.

Any input is appreciated!

[chrisburton]

It is on top of the header?

[zippy1990]

Yes it is. It should be, otherwise you wouldn’t be able to see it and would be tucked away under the header.

[chrisburton]

I know. That’s what I’m saying. It is on top of the header. So what is the issue again?

[zippy1990]

The problem is that, when the menu is on top of the header (Using z-index), the links on my website are broken. So links like a mailto, or website reference, or banner links(all those banners on the “Links” page should be clickable)

If you still don’t know what I mean, try to disable the z-index on the menu ul, and you will see that the links work. ( But places the menu under the header, thus making it invisible)

[chrisburton]

My question is that if it already works, what’s the actual issue? The links are working for me.

[zippy1990]

I think we have a slight misunderstanding, they are not working for me in either firefox nor Google chrome or Internet Explorer. What links are you clicking exactly? I don’t mean the button “links”. If that’s what you’re thinking.

[chrisburton]

I think we do have a misunderstanding. I didn’t quite see what you were referring to but now that I do, give me a few moments.

[zippy1990]

Alright, glad that’s sorted out! Excuse me if I was a little unclear.
Appreciate the effort.

[chrisburton]

If you set a height on the menu that solves the issue.

[zippy1990]

Where, exactly? Could you show me the edited code?

[zippy1990]

Nevermind, found it! Thank you so much for helping.

Can’t thank you enough.

[Author]

Posts