Changing Mobile Header Logo Alignment

Can you try editing the 90px to half of your logo image width?

That's just for the example.

Ive set it to 10px,
But now the alignment of the mobile logo header, works only to the ENG version of the website.

I've edited this part of this CSS: https://generatepress.com/forums/topic/changing-mobile-header-logo-alignment/#post-415636

Hey Leo,

There is something strange here with the latest CSS,
The alignment of the mobile logo header, works 100 percent in the ENG version of the website.

But in the HEB version of the website it works 50 percent of the time,
I'm getting complaints from my users that all the icons (Search/Menu/Mobile Header Logo) positions is mess up..

Doesn't look like you are using my most recent CSS here: https://generatepress.com/forums/topic/changing-mobile-header-logo-alignment/#post-415636

Hey Leo,

Just to be sure,

Do i need to use all the following CSS code? :

#mobile-header .site-logo {
    position: absolute;
    left: calc( 50% - 10px); /* 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;
    left: auto;
}
body:not(.rtl) #mobile-header button.menu-toggle {
    position: absolute;
    left: 0;
}

Or only this part of the CSS code ?:

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

i'm sorry but im confused :(

The first block.

Thanks Leo,

That did the trick :)

No problem :)

Hello Leo,

For some reason the mobile header alignment is messed up,
The Search Button is covering the menu button, and the logo isn't in the middle of the header.

Can you please help me? i think that there is something wrong with the css code:

#mobile-header .site-logo {
    position: absolute;
    left: calc( 20% - 10px); /* 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;
    left: auto;
}
body:not(.rtl) #mobile-header button.menu-toggle {
    position: absolute;
    left: 0;
}

What's the layout you want again?

The mobile header has been changed to flexbox so that's likely the reason.

but for starter you are using 20% instead of 50% for the first block of CSS which is why it's not centered.

Hey Leo,

I've changed it to 50%, and now the logo is at the middle.
But the Search Button is covering the Menu button.

How can i fix it?

Try adding this CSS:

#mobile-header .mobile-bar-items {
    margin-left: auto;
}

Hey leo,

Your latest CSS code, indeed fix my layout. and now the Search Button is not overlay the Menu button.
But Only for the Hebrew page of my website.

On my English & France version of my website, the problem still exist.

Further More,
Your latest CSS code, has replaced the alignment of the buttons in my Hebrew version of my website.
Meaning, the Menu Button is Now on the Left and The Search button is on the Right.

Hmm I'm not seeing the CSS being added.

Can you double check?