Changing Mobile Header Logo Alignment

Hi there,

So only at sticky header you want this change?

Hey Leo,

In the sticky header and in the top header. in mobile view only.

Thanks,

This should help: https://docs.generatepress.com/article/centering-logo-mobile-header/

Hey Leo,

I've followed your link,
and successfully centered the mobile logo header.

But because i have a multi language website ENG/HEB (Done via the Polylang Plugin),
The Alignment works only on the HEB version of the site.

How i can set the mobile logo header alignment, also to the ENG version of the site?

Just checked your site and don't see the logo?

Hey Leo,

I temporarily disabled it until we fix the alignment in both languages.

Can you please Check Now?

Try the CSS like this:

body.rtl #mobile-header button.menu-toggle {
    position: absolute;
    right: 0;
    left: auto;
}
body:not(.rtl) #mobile-header button.menu-toggle {
    position: absolute;
    left: 0;
}

Hey Leo,

Still no luck,
The Alignment works only on the HEB version of the site.

I still see this CSS being added:

#mobile-header button.menu-toggle {
    position: absolute;
    right: 0;
}

That's different than what I have above.

Hey Leo,

I left the old css code,
Because i can't alignment the mobile logo header at all, with the last css you wrote me.

Do you want me,
To leave it there anyway for you to check it?

Yes please :)

Done :)

Can you make sure to add the CSS here: https://docs.generatepress.com/article/centering-logo-mobile-header/
and my CSS here? https://generatepress.com/forums/topic/changing-mobile-header-logo-alignment/#post-416215

I've Added the following CSS:

#mobile-header .site-logo {
    position: absolute;
    left: calc( 50% - 90px); /* 50% from the left - half your image width */
}

#mobile-header button.menu-toggle {
    position: absolute;
    left: 0;
}

body.rtl #mobile-header button.menu-toggle {
    position: absolute;
    right: 0;
}
#mobile-header button.menu-toggle {
    position: absolute;
    left: 0;
}