Site logo

[Resolved] center the header logo on mobile

Home Forums Support [Resolved] center the header logo on mobile

Home Forums Support center the header logo on mobile

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2431967
    Cynthia

    I am trying to center the mobile header logo also but when I use the CSS use provided #2135872 above, then my logo size becomes very small which I don’t want. I would like the size to remain as it is, I just want to center it. It is currently on the left in mobile view.

    I’m using this CSS currently:

    .navigation-branding img, .site-logo.mobile-header-logo img{
    width:300px;
    height:auto;
    margin-bottom:20px;
    margin-top:30px
    }

    I currently have mobile header set to ON

    #2431978
    Leo
    Staff
    Customer Support

    Hi there,

    Try this CSS:

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

    Hi Leo

    The css you provide does center the logo, but it reduces the size of it too way small so I adjusted the css I already had there and added on the “left: 10%;” and it moved the logo while retaining the size I wanted it. I preferred css that would be isometrical but I will just use this tweak for now.

    .navigation-branding img, .site-logo.mobile-header-logo img{
    width:300px;
    height:auto;
    margin-bottom:20px;
    margin-top:30px;
    left: 10%;
    }

    #2434088
    Leo
    Staff
    Customer Support

    Sounds good.

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