The menu disappears

Question

Can some body tell me, why my menu disappears when I open "Case Studies" and when I put a mouse on it.

I am identify the problem in the transform: translate() property, but do not know how to fix it.

http://dinamickadevelopment.github.io/Nousles/index.html

Many thanks.

Answer 1

remove

 #header {
 z-index: 55;
}

from index.css line 33

That will bring back your menu when you select Case Studies

Answer 2

DCdaz is correct. I've checked it in chrome, safari, firefox. Firefox displays it just fine (though your :hover for the top-right corner isn't working for firefox). Removing the z-index: 55 fixes it in chrome and safari and does not adversely affect the page in firefox.

You're using a lot of z-indexing on this site. I realize that a lot of this is coming from bootstrap and the like, but you might want to consider a different way of handling it. Chris Coyier presents an interesting idea taken from video game development. However it utilized using a pre-processor for css, so it' might not be an option for you. He does discuss another method that would work, but, for personal reasons, he doesn't like them.

Anyways, long story short, removing the z-index: 55 from line 33 on index.css seems to fix the problem. Your site looks nice enough that I doubt you don't already know most of this, but you say you tried removing it, so here are some ideas why that may not have fixed it:

How did you get rid of the z-index:55 ? Did you delete it from your files and re-upload it? If you did then make sure you clear your cache before you check to see if the issue is gone away. Chrome and Safari have built in ways to do this. I don't know of a quick way in Firefox, but there are ways . CSS especially can fall prey to this.

If you didn't delete it from the file (which I don't think you did, since I still see it when I check your code), then you might have removed it by using the developer tools directly in your browser. All major browsers (that I know of) have this option. This is the way I checked it and it worked for me (and probably DCdaz), so I have no idea why it wouldn't for you.

If you didn't use either of the methods above then you might have edited and ran your code locally. I have no idea why it wouldn't have worked locally, but that's the last thing I can think of.

If you didn't use any of the above methods I'd love to hear how you went about removing it. I'm always up for learning new ways to skin a cat.

EDIT

I didn't even consider that you may have simply changed the z-index value to something else. I tried changing it and z-index: auto , z-index: inherit , and z-index: initial all seem to work just fine, but any number value (even negative ones) allow the error to remain intact. So either delete it or change it to auto, inherit, or initial.