Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 23, 2015 at 2:32 pm #384352
    crewneck

    I want my logo to shrink and center when accessing my page on mobile devices? How can I achieve this?

    • This topic was modified 9 years, 10 months ago by crewneck.
    January 23, 2015 at 4:27 pm #384396
    Yigit

    Hi crewneck!

    Please add following code to Quick CSS 

    .responsive .logo {
left: 35%!important;
position: relative;
}
@media only screen and (max-width: 480px) {
.responsive .logo {
left: 25%!important;
position: relative;
}}

    Regards,
    Yigit

    January 23, 2015 at 7:51 pm #384583
    crewneck
    This reply has been marked as private.
    January 24, 2015 at 12:18 pm #384852
    Ismael

    Hi!

    The logo is currently situated on the left. Where do you want to position the menu when you center align the logo? Have you tried using the Logo center, Menu below option on Enfold > Header > Menu and Logo Position settings?

    Cheers!
    Ismael

    January 24, 2015 at 11:04 pm #385012
    crewneck

    As far on the right as possible.

    January 26, 2015 at 12:48 pm #385397
    Ismael

    Hey!

    Alright. Go to Enfold > Header > Header Behavior then enable the Let logo and menu position adapt to browser window. Add this on Quick CSS:

    div .logo {
float: none;
position: absolute;
z-index: 1;
left: 50%;
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}

    Cheers!
    Ismael

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