Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • August 24, 2022 at 6:44 pm #1362666
    InstitutGenerationenBeratung

    Hello,
    The header of our homepage is displayed perfectly on the PC. On the other hand, the header looks terrible on mobile devices (Iphone, IPad). One line less is displayed, which means that the button for the menu is overlaid by the logo. I would greatly appreciate any suggestions on how to change this. Many thanks for the support.

    August 25, 2022 at 5:53 am #1362705
    Nikko

    Hi Margit,

    You can fix the ipad display by adding this CSS code in Enfold > General Styling > Quick CSS:

    @media only screen and (max-width: 989px) {
  .html_header_top.html_logo_center #header .logo {
    left: 0;
    transform: translate(0);
  }
}

    As for mobile it seems good on my end, can you post a screenshot on your end? and maybe the changes that you would like to do and we’ll try to help you by providing CSS code.

    Best regards,
    Nikko

    August 25, 2022 at 3:58 pm #1362800
    InstitutGenerationenBeratung

    Hi Nikko,
    Thank you very much for your competent support and your fast response.
    After implementing the css the header looks much better on the IPAD.
    There ist still an overlaying on the iPhone in the landscape format:
    https://share.icloud.com/photos/092-r_LK5xDwpRxW64yWnDYSA
    The menu on both, IPAD and iPhone is not complete. Only the first menu item out of six on the desktop version is displayed.
    The logo size on both mobile devices should be smaller. On the desktop version it fits. Is there a way to change the size only for mobile devices?
    the image size of the logo I have uploaded is 340×156

    Thank you very much for your outstanding support.

    Best regards

    Margit

    August 26, 2022 at 3:49 pm #1362895
    Nikko

    Hi Margit,

    You’re welcome :)
    The social icons are taking a lot of space in the header, you can either remove them in the header on mobile by adding this CSS code:

    @media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #header .social_bookmarks {
    display: none;
  }

  .responsive #top .av-logo-container .av_menu_icon_beside {
    border: none;
    margin-right: 0;
    padding-right: 0;
  }
}

    Or you can move the social icons from the main header area to the top bar.

    Best regards,
    Nikko

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