[Resolved] Move Mobile Logo to Center

Home Forums Support Move Mobile Logo to Center

  • This topic has 13 replies, 3 voices, and was last updated 9 months ago by David.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #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?

    #1141906
    Leo
    Staff
    Customer Support

    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 🙂

    #1142954
    Matt

    Sorry about that – its now disabled.

    #1142956
    Leo
    Staff
    Customer Support

    Can you try this code instead?

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

    Let me know 🙂

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

    #1142995
    Leo
    Staff
    Customer Support

    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/

    #1143083
    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.

    #1143130
    Leo
    Staff
    Customer Support

    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

    #1143132
    Leo
    Staff
    Customer Support
    #1143402
    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

    #1143406
    Matt

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

    #1143524
    David
    Staff
    Customer Support

    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 */
    }
    #1143731
    Matt

    You da man!! 🙂
    All fixed.

    #1143737
    David
    Staff
    Customer Support

    Glad we could be of help

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.