Okay
  Public Ticket #1649002
Layout related
Closed

Comments

  • Rafael started the conversation
    July 20, 2018 at 5:02pm

    Hey guys,

    I'm using the centered header menu option for my client's website, everything ok.. but, when viewing in smartphone/tablets/small screen the logo is always left aligned. Is there any way (custom css) to have the logo centered on mobile?

    Thanks.

  •  9,001
    Tahir replied
    July 21, 2018 at 11:10am

    Hey R,

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    @media only screen and (max-width: 1000px) and (min-width: 1px) {
    #header-outer[data-format="centered-logo-between-menu"] .span_3 {
        position: absolute;
        left: 50% !important;
        margin-right: 0;
    }
    #header-outer[data-format="centered-logo-between-menu"] .span_3 #logo:not(.no-image) img {
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    }
}

    Thanks

    ThemeNectar Support Team