Heading

Hi there,

is the Orange line above the headings ?

And do you have a GP site setup with this in place ?

Hi David

My site is http://www.enhanced-flooring.co.uk

I've tried to do the icon above the heading but it does not look right

something like the about page on the site below would be good.
under the about us.

just something to break up the page

http://www.oakdrylining.co.uk/about-us/

Thanks

Dave

You could create your own Custom Separator style.
First add this CSS:

hr.fancy-divider {
    position: relative;
    border-top: none;
    border-bottom: none;
    background-color: #000;
}
hr.fancy-divider:before {
    content: '';
    position: absolute;
    left: 0;
    top: -1px;
    width: 100px;
    height: 3px;
    background-color: #ff0000;
}

Then add a Separator Block to the page, and with the block selected go to Advanced > Additional CSS Class(es) and add: fancy-divider

Thanks david,

I have just tried this on my about page but it doesn't look right, ive had a play about with the size but no change

http://www.enhanced-flooring.co.uk/about-us

Are you wanting the thicker color border to span the width of the title text ?

I want the blue bit to be thicker only, so a thick blue line and the thin light grey

hope that makes sense

Try this CSS - i have adjusted it, and commented the line that have been changed:

hr.fancy-divider {
    position: relative;
    border-top: none;
    border-bottom: none;
    background-color: #cccccc; /* Adjust the #888; to the color you require */
}
hr.fancy-divider:before {
    content: '';
    position: absolute;
    left: 0;
    top: -2px; /* Adjust vertical position of blue line */
    width: 100px;
    height: 5px; /* Adjust thickness of blue line */
    background-color: #7ea0b7;
}

thanks david, i still have the same issue with the blue line thickness unfortunately

If you remove any CSS you have, and disable autoptimize ( which will ensure you're not seeing a cached version ). And just add the CSS i provided here:

https://generatepress.com/forums/topic/heading/#post-1898720

That line should be 5px in height which is greater then the 3px border you have added currently.

same issue, i have disabled autoptimize and cleared the cache

i have increased the blue line to 200px and i am seeing that being updated

appreciate your help

This is what i see:

https://www.screencast.com/t/sbFGGH0LdzEx

And if increase the Height and adjust the Top i see this:

https://www.screencast.com/t/K9gQ6eJl

What am i missing ?