Tagged: , , , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 20, 2026 at 1:40 am #1495250
    Brad

    Hello,

    The desktop version of our site uses Roboto for the main menu and submenu items, but the burger menu on mobile is showing Playfair Display, which is what we use for headings. I’ve tried adjusting various elements, but I can’t seem to find the solution to make the burger menu fonts the same as the regular main menu/submenu.

    Thank you.

    • This topic was modified 2 weeks, 6 days ago by Brad. Reason: added clarity
    February 20, 2026 at 6:53 am #1495257
    Ismael

    Hey Brad,

    Thank you for the inquiry.

    Did you add this css code?

    #av-burger-menu-ul li, .av-current-sort-title, h1, h2, h3, h4 {
    font-family: 'playfair display',Helvetica,Arial,sans-serif;
}

    Try to override it with this css:

    #av-burger-menu-ul li {
    font-family: roboto, Helvetica, Arial, sans-serif;
}

    Or configure the Menu Links in overlay/slide out element in the Enfold > Advanced Styling panel. Let us know the result.

    Best regards,
    Ismael

    February 20, 2026 at 10:19 pm #1495307
    Brad

    I didn’t manually add the first CSS you mentioned, but it was probably generated by my earlier adjustments in the Advanced Styling panel.

    Related to that, the “Reset all options” button at the bottom of that section would just reset all of the Advanced Styling options and NOT other changes in the Enfold area, e.g., General Styling, etc., is that correct?

    I think part of the issue was the plugin WP-Rocket had cached CSS versions that weren’t updated in real time with my changes. After “Clearing used CSS” in the settings area for WP-Rocket, I was able to target the burger menu with both options you outlined. I opted to not use the override CSS option via Quick CSS, as it seemed cleaner to use Advanced Styling.

    One short follow up: Where is the Quick CSS in the hierarchy? For a different matter, I tried to target the fullscreen slider caption titles with:

    .avia-caption-title {text-transform:none;}

    …to get rid of the transform to uppercase that seems to be the default, but it didn’t work until I did:

    .avia-caption-title {text-transform:none!important;}

    Is that because the Quick CSS styles are read before the other stylesheets—meaning, the !important element is often required for things?

    Thanks again.

    • This reply was modified 2 weeks, 5 days ago by Brad.
    February 21, 2026 at 9:06 pm #1495325
    Mike

    Hi,
    The “Reset all options” button will reset all, it is not recommended to use unless you want to remove all options & style.
    .avia-caption-title {text-transform:none;}
    did not work for you because it doesn’t have high enough specificity, the correct css would be:

    #top .slideshow_caption h2.avia-caption-title {
    text-transform: none;
}

    !important is not required, just enough classes and/or IDs to override the theme css, nearly no theme css is a single class like in your css: .avia-caption-title

    Best regards,
    Mike

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