- This topic has 13 replies, 3 voices, and was last updated 3 years ago by
David.
-
AuthorPosts
-
January 23, 2020 at 12:34 pm #1141889
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?
January 23, 2020 at 1:10 pm #1141906Leo
StaffCustomer SupportHi there,
Any chance you can do this first so I can see the source code better?
https://www.screencast.com/t/E6DCGwhD7gzLet me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 24, 2020 at 11:15 am #1142954Matt
Sorry about that – its now disabled.
January 24, 2020 at 11:19 am #1142956Leo
StaffCustomer SupportCan 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/January 24, 2020 at 11:44 am #1142981Matt
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;
}January 24, 2020 at 11:52 am #1142995Leo
StaffCustomer SupportI’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/January 24, 2020 at 2:16 pm #1143083Matt
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.
January 24, 2020 at 4:23 pm #1143130Leo
StaffCustomer SupportI took a very quick look and noticed that 2
;
are missing:
https://www.screencast.com/t/prq7ORaXiU7CPlease 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-1142956Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 24, 2020 at 4:25 pm #1143132Leo
StaffCustomer SupportHere is another line missing
;
:
https://www.screencast.com/t/vUHmJyTJtaDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 25, 2020 at 3:19 am #1143402Matt
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 cartJanuary 25, 2020 at 3:23 am #1143406Matt
p.s I’ve not published the customise > additional CSS at this point
January 25, 2020 at 6:18 am #1143524David
StaffCustomer SupportHi 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/January 25, 2020 at 6:58 am #1143731Matt
You da man!! π
All fixed.January 25, 2020 at 7:02 am #1143737David
StaffCustomer SupportGlad we could be of help
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.