Linked Questions

Popular Questions

Mobile menu button jumping around

Asked by At

I am building a website for my church, https://new.churchindenver.org/

and I have a mobile "Menu" button that opens the mobile menu, and a "Close" button that closes it.

Both have the following CSS:

display: inline;
position: absolute;
top:10px;
right: 10px;

I want the menu button to be in absolute position top:10px; right: 10px;

When the screen width is 601-895px it works fine. When the screen width is <=600px, the css is being ignored and the "Menu" button jumps down about 50px. (and the logo jumps down too, incidentally, though not as far) Does anyone have any idea why?

Thanks!

Whether ! important or not, and no matter what I put there, the menu button (and the logo) are in absolute position, but apparently not to their parent element.

UPDATE: Based on Elraphty's suggestion, I made the following hack, which seems to fix it. I'm still not sure what's going on, but at least it looks right. I put:

@media (max-width: 600px) {
    #menu {
        top: -41px ! important;
    }
    #logo {
        top: -10px ! important;
    }
}

and now the menu button and logo are in their proper position at top 10px.

Related Questions