Header Fixed CSS - Transform Translate X

Question

I’m trying to get the header from the mobile site stay fixed onscreen.

However, I have a button on this header that opens the MENU to the right of the site, using the transform: translateX(-15%) applied in the main. When I’m at the top of the site works perfectly.

Now if the site is not at the top, it is in the middle of the screen for example, by clicking the button, the MENU is shown, but the header some. And I found out it’s because of the transform: translate in the main.

That’s a BUG ?

Has a hack to solve this ?

CSS

main#main{
    transition: all 0.3s ease;
    background-color: #FFF;
    &.is-active{
        transform: translateX(-210px);
    }
}

header#header{
    position: fixed;
    width: 100%;
    background-color: #a7ddb3;
    border-bottom: 8px solid #01613c;
    height: 50px;
    top: 0;
    left: 0;
    z-index: 3;
}

JS

var clickDeviceEvent    = 'touchstart' in window ? 'touchstart' : 'mousedown';
var menuMobile          = $("main, .menu-language, body, .open-menu");
urlBase                 = $('body').data('base');

// Abrir Menu Mobile
$('.open-menu').on(clickDeviceEvent, function(e){
    e.preventDefault();

    menuMobile.toggleClass('is-active');
});

Answer 1

I had a very similar problem a while back.. First check if the header’s vertical and horizontal positioning (top or bottom, left or right) are defined. This is the main reason for bugs of elements with "Fixed" in the middle of the page.

If this doesn’t work, could you let me know which browser you’re using and which operating system your device is? if possible also send the website URL to facilitate.