[Resolved] Want button inside mobile header centered.

[jorge]

Used this guide and was able to get button working, but isn’t centered – it is off to the right on my phone, was wondering if there’s css, or any setting to have it centered no matter the device.

Thank you very much!

[jorge]

Any ideas? Thanks again, just bumping.

[Tom]

Hi there,

Try this CSS:

#mobile-header .mobile-bar-items {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

[jorge]

That did it. Thank you very much, Tom!

[Tom]

You’re very welcome 🙂

[jorge]

Tom, it seems like the button text protrudes outside of the bar as in a small box. also when i scroll up , etc the placement of the button moves which looks odd.

[jorge]

I mean the button itself is outside of the bar as you scroll down.

[Tom]

Try adding this as well:

#mobile-header .mobile-bar-items .button {
    padding-top: 0;
    padding-bottom: 0;
}

[jorge]

Okay That removed the protrusion of the button. The button is not fixed as you scroll up it moves from one side to the other.

[jorge]

Is there anything i can do about the button moving as you scroll up and down? it doesn’t stay in a fixed spot.

[Tom]

Can you try the updated CSS?: https://generatepress.com/forums/topic/want-button-inside-mobile-header-centered/#post-1116854

[jorge]

I did try that, what i’m saying is as i scroll up, and down – the button shifts position as i scroll up or down it does not stay in a fixe position.

[jorge]

Does not stay in a fixed position.

[David]

Hi there,

remove this:

#mobile-header .mobile-bar-items {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

and lets try this instead:

#mobile-header .mobile-bar-items {
    margin-left: auto;
    margin-right: auto;
}
#mobile-header .menu-toggle {
    min-width: 60px;
}
.site-logo.mobile-header-logo {
    margin-right: unset;
}

[jorge]

That worked great, thank you!

[Author]

Posts