Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • April 23, 2025 at 8:07 pm #1482004
    Scanmark

    Hi there
    I’ve been searching high and low, but I can’t seem to find an answer to this question.

    I’m displaing the menu Items for desktop as a Burger menu. I’ve styled it by using the “Menu Links in overlay/slide out” option in “Advanced Styling”.
    So far…so good.

    The problem is that when I’m adjusting the font size so it looks good on the desktop, it’s way to big on the mobile. Adjusting it so it fits to the mobile, makes the font to small for the desktop.

    Can you provide me with a CSS-code that let’s me adjust the font size for either of these?

    April 24, 2025 at 9:09 am #1482094
    Ismael

    Hey Scanmark,

    Thank you for the inquiry.

    You can use this css code to manually adjust the style of the menu items on mobile view:

    @media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .html_av-overlay-side #top #wrap_all .av-burger-overlay li a {
    line-height: 1.3em;
    height: auto;
    padding: 15px 50px;
    display: block;
    text-align: left;
    text-decoration: none;
    font-size: 16px;
  }
}

    Best regards,
    Ismael

    April 24, 2025 at 10:52 am #1482129
    Scanmark

    Hi Ismael and thanks for your quick reply.

    I’ve added the CSS code you sent me in the Quick CSS panel, but that didn’t make any changes to the mobile menu.

    In the Advanced Styling Menu –> Menu Links in overlay/slide out , the font size is set to 90 px and on desktop it looks fine, but it seems to be 90 px on mobile view aswll despite adding the CSS code.

    I’ve attached the login credentials in Private Content if you want to take a closer look youself.

    April 25, 2025 at 5:57 am #1482553
    Ismael

    Hi,

    Thank you for the inquiry.

    We adjusted the code in the Quick CSS field a bit and temporarily disabled the Performance > File Compressions settings.

    @media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a {
    font-size: 32px;
    line-height: 0.5em;
  }

  #top #wrap_all #header #av-burger-menu-ul>li.av-active-burger-items {
    opacity: 1;
    top: 0;
    left: 0;
    padding: 0.2em 0;
  }
}

    View post on imgur.com

    Best regards,
    Ismael

    April 25, 2025 at 9:22 am #1482672
    Scanmark

    Aaahh…this looks great, Ismael. Thanks a lot! :-D

    I don’t mean to nitpick but there’s just one more tiny detail.
    When testing it on mobile, the size, margins and everything looks great, but the animation is lagging when opening the menu.

    Is there someway to make the animation smoother? If not…maybe it’s better to just deactivate the animation?

    Best regards
    Roland

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