Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • November 11, 2024 at 7:51 pm #1471104
    Sandy

    The header logo is cut off in mobile, though it looks good on desktop. A lesser issue, the menu items are too low on mobile. Some CSS already manages header logo and menu button. What is the correction needed to have the full logo visible and the menu items up in the great area on mobile?

    November 11, 2024 at 9:42 pm #1471118
    Rikard

    Hey Tanja,

    This CSS in Quick CSS is causing that to happen:

    @media only screen and (max-width: 767px) {
  .responsive #top .logo {
    height: 66px !important;
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

    Please try removing or adjusting the height.

    Best regards,
    Rikard

    November 11, 2024 at 10:39 pm #1471119
    Sandy

    Thank you, that increases the background height. The logo is still cut off.

    November 12, 2024 at 4:24 am #1471133
    Ismael

    Hi,

    Thank you for the update.

    We adjusted the css code a bit. Please try it again:

    @media only screen and (max-width: 767px) {
	.responsive #top .logo {
		height: 66px !important;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.responsive .logo img,
	.responsive .logo svg {
		margin: 0;
		max-height: 66px !important;
	}

        .responsive #top .av-logo-container .avia-menu {
                height: 100%;
                margin-top: -30px;
        }
}

    Best regards,
    Ismael

    November 12, 2024 at 2:55 pm #1471156
    Sandy

    Thank you! This works, with a little tweaking to my preferences.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Logo cutoff and menu too low on mobile’ is closed to new replies.