Styling h1 with additional classes


This might be more to do with my lack of CSS/HTML skills than a Beaver Builder query so my apologies if that is the case.

I’m trying to style specific h1’s by adding a class but can’t get the changes to be applied.

Here’s my approach

  1. Add h1 to pages using the Module > Heading
  2. The colour of the heading is set to #869d7a (via custom CSS)
  3. On a few pages I want to override the colour to #ffffff, this is so that it’s legible on different background colour
  4. So have added class text-white under Advanced > HTML Element > Class
  5. And added the following custom css
    .text-white {
    color: #ffffff;

Text remains #333333.

Have tried on body copy and works fine. So assuming it’s either my lack of understanding or something specific about how to add styles to headings via BeaverBuilder.

Any help appreciated.


A URL where we can see the issue would be helpful.


Here’s a URL

It’s the h1 that I am trying to target.

Assume something to do with specificity or how I’m adding the extra class.

Thank you