[Support request] Changing Mobile Header Logo Alignment

[Ohad]

Hello,

I want to change the position of the my Mobile Header Logo,
To be in the Center of the Sticky Mobile Header, between the Search icon and the Menu Icon.

Instead of the current situation,
when The Mobile Header Logo is on the right site.

Thanks,
Ohad

[Leo]

Hi there,

So only at sticky header you want this change?

[Ohad]

Hey Leo,

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

Thanks,

[Leo]

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

[Ohad]

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?

[Leo]

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

[Ohad]

Hey Leo,

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

Can you please Check Now?

[Leo]

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

[Ohad]

Hey Leo,

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

[Leo]

I still see this CSS being added:

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

That’s different than what I have above.

[Ohad]

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?

[Leo]

Yes please 🙂

[Ohad]

Done 🙂

[Leo]

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

[Ohad]

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

[Author]

Posts