Want button inside mobile header centered.

Any ideas? Thanks again, just bumping.

Hi there,

Try this CSS:

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

That did it. Thank you very much, Tom!

You're very welcome :)

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.

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

Try adding this as well:

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

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.

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

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

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.

Does not stay in a fixed position.

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;
}

That worked great, thank you!