[Support request] Changing header font color when using Elements header

[gedosan]

Hi guys,

How do I change the header nav bar font color (and set the background to transparent) on a page where I’m using an Elements header? I’d also like to tweak the size of the H1 tag as well just for that page.

I’m using Tom’s Simple CSS plugin, so able to add page-specific CSS.

Thank you kindly,

G

[David]

Hi there,

within the Header Element > Site Header Tab you can set it to Merged – example setup here:

https://docs.generatepress.com/article/page-hero-examples/#example-2

In the Header Element – there is an Elements Class field. Give it a class name eg. custom-hero then you can use that class to target the H1 :

.custom-hero h1 {
    font-size: 56px;
}

[gedosan]

Hmm, I already did that (set it to merged)?

[gedosan]

sorry just spotted it. By the way, could you provide me with the CSS to control the size of the author pic, byline and date please?

[David]

So you already have this CSS for the author avatar in Simple CSS:

.page-hero-gravatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin: 0 10px 0 0;
}

Change the width and height properties to resize.

For the byline and date try adding this:

.hero-meta a,
.hero-meta time {
    font-size: 16px;
}

[gedosan]

Perfect thanks

[David]

You’re welcome

[Author]

Posts