Using svg in header element

Hi Dave,

You can add the SVG HTML code in the header element.

Let me know if this helps :)

Thanks Leo. How would I style it?

Dave

It should be centered as long as the horizontal alignment is set to center:
https://docs.generatepress.com/article/header-element-overview/#horizontal-alignment

Have you tried adding it in first?

Hi Dave,

If you only have 1 svg file within your Header Element, you can use something like this in CSS:

.page-hero svg{
//your style goes here
}

If you have multiple SVGs within the Header Element, I suggest wrapping them in divs so you can target them specifically:

Example HTML:

You can then style them like this:

.page-hero .svg-1 svg{
//your style for first SVG goes here
}
.page-hero .svg-2 svg{
//your style for second SVG goes here
}

thanks. It has been inserted but I am still unsure how to size it. I would also like to make it white instead of black.

Cheers,

Dave

Hi Dave,

Try this:

.page-hero svg {
    width: 100px;
    fill: #fff;
}

Thanks Ying,

Is there a way to also make it display inline like this page?

Cheers,

Dave

In order to do that, you need to give the paragraph a <p></p> tag.
And there's an empty H3needs to be cleared out.

Then you could try this CSS:

.page-hero .Itineraries h1 {
    display: inline-block;
} 

Thanks, everyone. That worked.

No problem :)