Custom header won't take styles of header Theme Options

[sarahwefald]

The first image is the formatting of the header as configured from the Theme Options. The second image is what it looks like with a custom header, even though the CSS classes are the same. Any idea why it’s doing this?

How I want it to look: https://www.dropbox.com/s/f6jg9v0d5hrgo25/Screen%20Shot%202019-11-20%20at%2010.20.26%20PM.png?dl=0

How it keeps displaying despite CSS: https://www.dropbox.com/s/7ye7eh7j23qi3xx/Screen%20Shot%202019-11-20%20at%2010.20.37%20PM.png?dl=0

[christian]

Hey Sarah,

You’re most probably using a Headline element. The Headline element has its own text options including font family, font size, color, etc. Those options can’t be overridden easily by design.

The screenshot below is the output of the Headline element with a custom Class (override) assigned to it and CSS added to Theme Options.

As you can see, though there’s nothing wrong with the CSS, it doesn’t override the color of the text. That is because, the Font Color option targets the actual heading tag in the Headline element and it’s more specific. If you’re not sure what CSS Specificity is, please read https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Please use the options available in the element. Otherwise, you’d need to be more specific with your CSS.

Hope that helps.

[sarahwefald]

Hi Christian, I’m using a text element and changed to use the CSS options available in the element. The only way to get it to use the font I wanted was to customize CSS. However, it is ignoring rules to make the color white for this particular link, the way it did easily when using the default brand/identity options in the theme options. Any ideas why it’s doing that? It’s showing the logo as red instead of white. Red is the link color for the rest of the site. I also tried adding the x-brand class to the element using the Customize options, but that doesn’t seem to work.

[ruenel]

Hello Sarah,

The text content should follow the css styling which you have define in the element settings. I have checked your other thread and you added this:

<h1 class="visually-hidden">Frankie Valli and the Four Seasons</h1>
<a href="/" class="x-brand text">Frankie Valli and the Four Seasons</a>

Then the link text will now follow the link color which is already in Pro > Theme Options > Typography > Site Links which is red. You will need to add a custom css styling by adding an element css in “Customize” tab. You will have to add this:

$el .x-brand {
   color: white;
   transition: color 0.5s ease;
}

$el .x-brand:hover {
   color: yellow;
}

I went ahead and added it already so that you can immediately see the changes. Feel free to change the colors.

Regards.