Different font size for main menu links on desktop/mobile on overlay/slide out - Support

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
April 23, 2025 at 8:07 pm #1482004

Scanmark
Participant

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
Moderator
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
Participant

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
Moderator
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
Participant

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

April 26, 2025 at 8:04 pm #1483233
Mike
Moderator
Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
```
@media only screen and (max-width: 767px) { 
#top #wrap_all #av-burger-menu-ul > li,
#top #wrap_all #av-burger-menu-ul > li a {
	top:0 !important;
	opacity:1 !important;
	padding: 4px 0 !important;
}
}
@media only screen and (min-width: 768px) { 
#top #wrap_all #av-burger-menu-ul > li,
#top #wrap_all #av-burger-menu-ul > li a {
	top:0 !important;
	opacity:1 !important;
}
}
```
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike
April 28, 2025 at 8:16 am #1483275

Scanmark
Participant

Hi

Thank you Mike. This got rid of the animation and the lagging.

Am I to replace the previous CSS code that Ismael sent me or should I add your code in addition?

Best regards
Roland

April 29, 2025 at 3:58 pm #1483343

Scanmark
Participant

Hi

Please advice to my previous question.

Best regards
Roland

April 29, 2025 at 10:33 pm #1483355

Mike
Moderator

Hi,
Thanks for your patience, please add this css with Ismael’s
Please note that testing with iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

Best regards,
Mike

April 30, 2025 at 11:39 am #1483407

Scanmark
Participant

Thanks a lot, Mike.

It looks great now, but I have one more question.
When opening the menu on my mobile device, the text on the menu appears low on the screen.
When scrolling down a bit the menu raises to a higher position.

Is there a quick CSS fix to center the menu on the screen and eliminate the unnecessary scrolling?

Best regards
Roland

May 1, 2025 at 6:32 am #1483429
Ismael
Moderator
Hi,

Thank you for the update.

Try to add this css code to disable scrolling when the burger menu is open.
```
.av-burger-overlay-active {
    overflow: hidden;
}
```
Best regards,
Ismael
May 2, 2025 at 8:27 am #1483486

Scanmark
Participant

Hi Ismael

I’m sorry, but that didn’t help. The menu is still positioned low on the screen in mobile view and it still has this additional scroll within the menu.

May 3, 2025 at 7:14 pm #1483556
Mike
Moderator
Hi,
I added this css:
```
@media only screen and (max-width: 767px) { 
.av-burger-overlay-active .av-burger-overlay-scroll,
 .av-burger-overlay-active {
    overflow: hidden;
}
#top #av-burger-menu-ul {
    vertical-align: top;
}
}
```
clear your browser cache and check.

Best regards,
Mike
May 6, 2025 at 9:03 am #1483672

Scanmark
Participant

Works like a charm now! Thanks, Mike! :-)

May 6, 2025 at 11:05 am #1483680

Mike
Moderator

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Different font size for main menu links on desktop/mobile on overlay/slide out’ is closed to new replies.