Styling h1 with additional classes

BB Theme
1

Hi

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.

Thanks

2

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

3

Hi

Here’s a URL https://staging2.cairngormscapercaillie.scot/capercaillie-conservation/

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

4

A little late to help you but maybe can help others since I have the same issue.

The issue with using the advanced class is that it places the class on the surrounding element(div) and never on the H1 itself. You technically are trying to target the H1 as if it has the class of .text-white when actually your additional css now needs to target the div that contains the H1 - will be .text-white h1 {color:#ffffff;}.

Also - I can’t tell if you were putting the custom css in the “Additional CSS” input but that only accepts color:#ffffff and not .text-white {color:#ffffff;}. And won’t work either as it is assigning the color to the div and not the H1.

I add the CSS to the Custom CCS & JS in the theme settings (maybe different per theme)