Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • February 21, 2019 at 8:09 pm #1070083
    check-t

    Hi,
    We managed to replicate the nice behavior of the sticky header of the desktop style to the Mobile viewport (<768px). So the logo dynamically reduces its size when the sticky header fades in. Perfect!
    But unfortunately on iOS devices the logo stays big on sticky and overlaps the header. I attached the project link and our custom CSS. Do you have any hind what went wrong here? The responsive developer-view of OS Xs’ Safari does’t show the problem, it’s really just visible on native Iphones.

    Thanks a lot in advance!
    Tobias

    February 26, 2019 at 12:33 am #1071563
    Ismael

    Hey check-t,

    Thank you for using Enfold.

    This css code should help limit the height of the logo on mobile view.

    @media only screen and (max-width: 767px) {
.responsive #top .av_header_transparency .logo {
    height: 62px !important;
}

.responsive .logo img {
    max-height: 62px;
}
}

    Best regards,
    Ismael

    February 26, 2019 at 11:03 am #1071703
    check-t

    Hi Ismael,

    thank you for your reply and the great work of the whole team. This already helps to make the sticky header logo not overlap over the sticky header bar.

    But this CSS limits the hight of both, the large transparent logo and the sticky bar logo to 62px.
    What is the actual class of the sticky logo, we only want this should be smaller, transparent logo should remain as big as it is.

    Kind regards
    Tobias

    February 27, 2019 at 1:56 am #1072108
    Ismael

    Hi,

    Thanks for the update. Try to move this code:

    .responsive #top .av_header_transparency .logo {
    height: 62px !important;
}

    .. right after the other one and adjust the height value.

    Best regards,
    Ismael

    March 11, 2019 at 4:35 pm #1077405
    check-t

    Hm, but this is exactly the CSS that is part of the former code. What should it change and how?

    Thank you!

    March 11, 2019 at 4:37 pm #1077408
    check-t

    Ah, sorry, read it a second time. You mean moving it out of the ‘@media only screen’ to make it valid for all resolutions. Ok, we’ll give it a try. Thx!

    March 11, 2019 at 11:15 pm #1077556
    Jordan Shannon

    Hi,

    Did this work for you, or did you need additional help?

    Best regards,
    Jordan Shannon

    March 12, 2019 at 2:12 pm #1077828
    check-t

    Hi Jordan,

    i’ll have to move the test of this a bit to the future, project is already life, big company, testing is organised in several steps.

    Thank you
    Tobias

    March 12, 2019 at 6:18 pm #1077879
    Jordan Shannon

    Hi,

    Okay. We’ll await the results.

    Best regards,
    Jordan Shannon

    June 7, 2019 at 2:46 pm #1108271
    check-t

    Hi Jordan, thanks – it perfectly worked. Sorry, had another project to complete so the feedback took ‘some’ time.

    Kind regards!

    June 8, 2019 at 12:14 am #1108332
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Mobile Sticky Headers' Logo to big, but only on Iphone, works with Chrome’ is closed to new replies.