CSS Transform Nav Issues

Question

I am trying to get a navigation working for a personal website. I feel like I've got it functioning more or less how I would like it, but I'm running into some issues I was hoping to get help with.

Here's a link to my JSfiddle.

First, I'm not sure what's happening with nav icon after the CSS transform. I'm trying to apply the cursor:pointer property to the X, but it doesn't seem to be taking. What am I doing wrong?

Code for reference:

.bt-menu-trigger {
    position: fixed;
    top: 15px;
    right: 20px;
    display: block;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

Also, I was having a problem getting the li elements to fade in. I am trying to style this transition using CSS, but am having a hard time getting this to take, also.

Code for reference:

.bt-menu ul {
position: fixed;
z-index: 100;
top:30%;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
-webkit-transition: background-color 0.3s ease-in-out, visibility 0.3s ease-in-out;

-moz-transition: background-color 0.3s ease-in-out, visibility 0.3s ease-in-out; -ms-transition: background-color 0.3s ease-in-out, visibility 0.3s ease-in-out; -o-transition: background-color 0.3s ease-in-out, visibility 0.3s ease-in-out; transition: background-color 0.3s ease-in-out, visibility 0.3s ease-in-out;

}

If I could get some help with this, I would appreciate it.

Thanks all.

ProllyGeek ProllyGeek · Accepted Answer · 2014-03-24T02:30:43

First issue : you X has the cursor : pointer , and works fine , it is just overlayed by a div of class <div class="bt-overlay"></div> so the fix will be :

.bt-menu-trigger {
    position: fixed;
    top: 15px;
    right: 20px;
    display: block;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index:99;
}

Second issue:

Visibility is not a standard , use opacity instead , and it will work fine

here is the fix:

.bt-menu ul li {
    padding: 16px 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: background-color 0.3s ease-in-out, opacity 2s ease-in-out;
    -moz-transition: background-color 0.3s ease-in-out, opacity 2s ease-in-out;
    -ms-transition: background-color 0.3s ease-in-out, opacity 2s ease-in-out;
    -o-transition: background-color 0.3s ease-in-out, opacity 2s ease-in-out;
    transition: background-color 0.3s ease-in-out, opacity 2s ease-in-out;
    }

CSS Transform Nav Issues

1 Answers