Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • January 31, 2015 at 1:40 pm #388742
    crewneck

    http://borstch.eu/nysajt/

    I’ve disabled my mobile menu and want the logo to be perfectly centered in the middle of header on all mobile devices.

    Is this possible to achieve?

    February 2, 2015 at 7:22 am #389161
    Ismael

    Hey crewneck!

    Thank you for using Enfold.

    Try to add this on Quick CSS or custom.css:

    @media only screen and (max-width: 767px) {
.responsive .logo a {
display: inline-block;
vertical-align: middle;
}

.responsive .logo {
position: relative;
display: block;
width: 100%;
text-align: center;
}
}

    Regards,
    Ismael

    June 10, 2016 at 8:44 pm #646338
    kevinmcgillivray

    This CSS is incorrect. The correct version is below. Thanks for the starting point, though!

    @media only screen and (max-width: 767px) {
.responsive .logo a {
display: inline-block;
vertical-align: middle;
}

.responsive .logo {
position: relative;
display: block;
width: 100%;
text-align: center;
}
}
    June 10, 2016 at 9:18 pm #646355
    Vinay

    Hi,

    Glad you got it sorted!

    Please feel free to let us know if you have more questions for us :)

    Thank you for using Enfold.

    Best regards,
    Vinay

    June 18, 2016 at 12:17 am #650038
    BrendaSarg

    Hi there, this didn’t work for me. When I added that code it put in a big blank space after?

    June 20, 2016 at 6:38 pm #651007
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .responsive #top .logo img {
    margin: auto;
}
.responsive #top .logo {
    width: 100%!important;
}

    Best regards,
    Yigit

    June 21, 2016 at 10:34 pm #651758
    BrendaSarg

    Hi there, this didn’t seem to work? I think the shopping cart is pushing it over? Can I get the logo centered and the shopping cart to go FAR right? If the shopping carts needs to be smaller for that to work on mobile, that’s fine too.

    June 24, 2016 at 4:30 am #652796
    Ismael

    Hi,

    We checked the page and the logo is in the center of the header container. Please remove browser cache or hard refresh the page.

    Best regards,
    Ismael

    June 24, 2016 at 4:50 am #652802
    BrendaSarg

    I got a developer to help…I’m not used to the longer turn around time for support on here lately :(

    June 27, 2016 at 9:04 am #653708
    Rikard

    Hi,

    Glad you got it working, we’ve been very busy lately and there was a big developers meeting this week in Vienna.

    Best regards,
    Rikard

    October 23, 2018 at 2:07 am #1025207
    Justin

    Hi @BrendaSarg what was the solution for this? Thanks

    October 23, 2018 at 2:31 pm #1025422
    Ismael

    Hi,

    You can try this css code.

    @media only screen and (max-width: 989) {
  /* Add your Mobile Styles here */
  .responsive #top .logo {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    top: 0;
  } 

  .responsive #top #header_main {
    z-index: 3;
    min-height: 80px;
    position: relative;
  }

  .responsive #top .logo img {
    margin: 0;
    margin: 0 auto;
    max-height: 80px !important;
 }
}

    Best regards,
    Ismael

    September 15, 2019 at 2:43 am #1138436
    yes9310

    Hi Ismael,

    I tried all of these and the last one you just posted. Also tried all the other related posts but it still won’t center just fo a regular site without a shopping cart. Can someone please have a look and let me know what could be the problem why the logo won’t center? Thanks, Frank

    September 16, 2019 at 11:40 am #1138773
    Ismael

    Hi,

    Thank you for the inquiry.

    You should adjust the vertical position of the logo. It’s not visible because it’s being covered by the top header.

    @media only screen and (max-width:767px) {
.html_header_top.html_logo_center .logo {
    left: 50%;
    -webkit-transform: translate(-50%, 0px);
    -ms-transform: translate(-50%,0);
    transform: translate(-50%, 0px);
    top: 50px !important;
}

.responsive #top #header .logo img {
    max-height: 32px !important;
}
}

    Add this code at the very bottom of the Quick CSS field or the style.css file.

    If you need further assistance, please open a new thread.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Center logo on all mobile devices?’ is closed to new replies.