- This topic has 13 replies, 3 voices, and was last updated 4 years, 2 months ago by David.
-
AuthorPosts
-
January 23, 2020 at 12:34 pm #1141889Matt
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 #1141906LeoStaffCustomer 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 π
January 24, 2020 at 11:15 am #1142954MattSorry about that – its now disabled.
January 24, 2020 at 11:19 am #1142956LeoStaffCustomer SupportCan you try this code instead?
.site-logo.mobile-header-logo { margin-left: auto; }
Let me know π
January 24, 2020 at 11:44 am #1142981MattHi 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 #1142995LeoStaffCustomer 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/January 24, 2020 at 2:16 pm #1143083MattThat’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 #1143130LeoStaffCustomer 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-1142956January 24, 2020 at 4:25 pm #1143132LeoStaffCustomer SupportHere is another line missing
;
:
https://www.screencast.com/t/vUHmJyTJtaJanuary 25, 2020 at 3:19 am #1143402MattI’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 #1143406Mattp.s I’ve not published the customise > additional CSS at this point
January 25, 2020 at 6:18 am #1143524DavidStaffCustomer 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 */ }
January 25, 2020 at 6:58 am #1143731MattYou da man!! π
All fixed.January 25, 2020 at 7:02 am #1143737DavidStaffCustomer SupportGlad we could be of help
-
AuthorPosts
- You must be logged in to reply to this topic.