Question

I just tested my website with both Google Chrome Desktop and Mobile version, and it seems like the label for the slide-out menu is not displaying. It does work, it’s just not displayed, and I have no idea why. Changing positions does not work here, because the slide-out design I’m using is relying on positions, and I need them to be fixed.

Related CSS:

#slideout #label {
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
    display:block;
    float:right;
    margin:46% 0 0 0;
    padding: 0 2px 6px 2px;
    font-size: 20px;
    position: fixed;
    left:-36px;
    -webkit-transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
    -moz-transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
    -o-transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
    transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
    background-color:#fff;
    border-bottom:0 !important;
    border-radius:8px 8px 0 0;
}

#slideout.opened #label {
    left: 86px;
}

JavaScript:

$('#label').on('click',function(){
    $('#slideout').toggleClass('opened');
});

---

EDIT: I tried using this code:

#slideout #label {
    position: absolute;
    left: 90px;
}
#slideout {
    position: relative;
}

But What happens is, the label is in the right place, but it is cut off and invisible.

Answer 1

Look at the opacity property of your slide panel.

You set opacity to 0.3 when hiding the panel, your label is inside your panel, so it fades too.

But it looks like there is some problem in chrome mobile, and opacity property. the button disappears completely. You should try to put it outside your panel. When I disable the opacity : 0.3 of the slide panel in chrome inspector, the label appears.

I think you should investigate this.