Move Mobile Logo to Center

[Matt]

I’ve moved the mobile menu to the left and now want to Center align the logo.
I found the below in the forum but it centers everything so the logo is on top of the hamburger and shopping cart.

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

How can I center the logo without that happening?

[Leo]

Hi there,

Any chance you can do this first so I can see the source code better?
https://www.screencast.com/t/E6DCGwhD7gz

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Matt]

Sorry about that – its now disabled.

[Leo]

Can you try this code instead?

.site-logo.mobile-header-logo {
    margin-left: auto;
}

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Matt]

Hi Leo, I’m already using that css. Here’s everything I use relating to the mobile header.

#mobile-header.has-branding .menu-toggle {
order: -5;
padding-left: 20px;
}

.site-logo.mobile-header-logo {
margin-left: auto;
}

.navigation-branding img, .site-logo.mobile-header-logo img {
height:44px !important;
}

[Leo]

I’m actually not seeing any CSS at all.

Can you go through your CSS and make sure there are no syntax errors that prevent the CSS below the error from executing?

Like every open { should have a close }.

You can use a site like this to check:
https://jigsaw.w3.org/css-validator/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Matt]

That’s odd. The CSS before and after it is taking effect e.g. Move mobile menu to the left and change the logo height.

The CSS editor in WordPress saves without erroring, too.

Could there be another reason you’re not seeing it?

I’ll run through the validator tomorrow but most of the errors relate to elementor and not the style.css.

[Leo]

I took a very quick look and noticed that 2 ; are missing:
https://www.screencast.com/t/prq7ORaXiU7C

Please make sure all the syntax issues are fixed.

I don’t see any other reason why the CSS won’t work.

You can always test by adding this CSS to the top of your child theme style sheet:
https://generatepress.com/forums/topic/move-mobile-logo-to-center/#post-1142956

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leo]

Here is another line missing ;:
https://www.screencast.com/t/vUHmJyTJta

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Matt]

I’ve corrected all issues relating to the child theme style.css using the validator tool you recommended. In the validator I can see the below CSS is showing in the ‘Valid css information’ section at the bottom

.site-logo.mobile-header-logo {
margin-left: auto;
}

I can the above in Chrome Dev tools by inspecting the element but the margin-left: auto is striked-out.

It’s weird, but by adding the same CSS into Customise > Additional CSS it moves it to the center position between the hamburger menu and the shopping cart. This is the only CSS I’ve ever had a problem with.

The same behaviour is seen when I revert to the parent theme. All non-essential plugins are currently disabled, leaving; woocommerce + payment gateways, Elementor and GP Premium.

Any new ideas on why this is happening?
Also, I’d like the logo to be center aligned in absolute terms and not just equidistant between the menu and cart

[Matt]

p.s I’ve not published the customise > additional CSS at this point

[David]

Hi there,

the reason your CSS is not being applied is a matter of specificity – there is a theme style that just pips it to the top spot.

You can either give your CSS some importance:

.site-logo.mobile-header-logo {
    margin-left: auto !important;	
}

Or make it more specific:

#mobile-header .site-logo.mobile-header-logo {
    margin-left: auto;	
}

If you want absolute positioning then use this CSS:

.site-logo.mobile-header-logo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); 
}

And then edit this CSS to include the auto margin property:

#mobile-header.has-branding .menu-toggle {
    order: -5;
    padding-left: 20px;
    margin-right:auto; /* Add this property */
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Matt]

You da man!! 🙂
All fixed.

[David]

Glad we could be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts