Mobile Menu Styling Not Working on Child Theme on Staging Site - Support

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

Author

Posts
October 7, 2025 at 1:29 pm #1489932

classywebsites
Participant

Hello,
The Main Menu items do not appear bold despite setting the styling to bold.
In Advanced Styling I set Main Menu Links to Font Weight Bold.
I set Menu Items for Mobile to Activate for Smartphones and Tablets (browser width below 990px) in Main Menu settings.

Please see Private Content below.
Can you please help me?
Can you please test your solution on desktop, tablet and mobile?
Thank you.

October 7, 2025 at 10:21 pm #1489939
Mike
Moderator
Hey classywebsites,
To add a bold font weight to the mobile menu you need to choose the Menu Links in overlay/slide out option in the Advanced Styling, I did this for you and it now works.
As for the mobile menu, please note that your desktop menu has too many items to show in a single line and not be under your logo until 1215px, so I recommend adding this css:
```
@media only screen and (min-width: 768px) and (max-width: 1215px) {
    .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
        display: block;
    }
    .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
        display: none;
    }
}
```
I added it for you in your WordPress > Customize > Additional CSS and tested desktop, tablet and mobile, please clear your browser cache and check.

Best regards,
Mike
October 8, 2025 at 3:44 am #1489941

classywebsites
Participant

Hi Mike,

Thank you for working on this and changing the font weight to bold in Menu Links in overlay/slide out option in the Advanced Styling.
I am trying to have the Menu Links in overlay/slide in bold, but the sublevel Links not in bold. This seems to already work on the Desktop.

I removed your code from WordPress >Customize>Additional CSS for now.
To avoid long menu issues on small screens, I simply set the burger menu for small screens:
I set Menu Items for Mobile to Activate for Smartphones and Tablets (browser width below 990px) in Main Menu settings Is that correct and avoid the need for your code?

Can you please fix this using Enfold Style settings to avoid more code?
Can you please test your solution on desktop, tablet and mobile?
Thank you

October 8, 2025 at 6:40 am #1489943
Ismael
Moderator
Hi,

Thank you for the update.

We added this code to the Quick CSS field to make sure the font of the submenu links remain regular on smaller screens. Unfortunately, there is no a dedicated option for this, so a custom css modification was necessary.
```
#top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li > ul.sub-menu  li a {
    font-weight: normal;
}
```
Best regards,
Ismael
October 8, 2025 at 7:51 pm #1489963

classywebsites
Participant

Hi,
That solved the problem. Please close this item.
The same way there is a Main Menu sublevel Links setting in Advanced Styling, can you please add an Advanced Styling for Menu sublevel Links in overlay/slide out?
Thank you!
Author

Posts

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

You must be logged in to reply to this topic.