Header Fixed CSS – Transform Translate X

Question:

I'm trying to get the mobile site header fixed on the screen.

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

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

Is this a BUG ?

Do you have 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:

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

If that doesn't solve it, could you let me know which browser you're using and the device's operating system? if possible also send the website URL to facilitate.

Post Views: 0
Scroll to Top