MyBB Community Forums

Hey guys,

I'm using a fixed header on my site and I thought everything was going good until
I looked at my site on mobile and the "fixed header" was moving all around on mobile devices,
so I googled and researched this and found this solution

-webkit-backface-visibility: hidden;

so here is my fixed header css now:

#header {
position:fixed;
width:100%;
z-index:1000;
-webkit-backface-visibility: hidden;
}

The issue now is, when I click on my javascript toggle dropdown menu, the entire header disappears on mobile devices.
but everything works perfect when the header is not fixed.

Can someone tell me what I'm doing wrong?

I put the javascript in the header template because the toggle drop downmenu is in the header template.
here is the script that runs the dropdown menu

<script>
function toggleNavPanel(x){
    var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="235px";
    if(panel.style.height == maxH){
        panel.style.height = "0px";
        navarrow.innerHTML = "▾";
    } else {
        panel.style.height = maxH;
        navarrow.innerHTML = "▴";
    }
}
</script>

I would like to have a fixed header on my site but if it doesn't work on mobile, I may have to trash can this fixed header, I'd appreciate any help with this or advice,or pointers to get this working on mobile.
Thanks.