[Support request] Page title bar same width as content container.

[Adam]

Hi there,

The site I am working on is set as a contained width of 1100px and has the header, menu, featured image, then content below.

I want to have a bar that is the same width as the header / menu / featured image etc, and the same background colour as the menu so that I can type the page title in. The majority of the site pages are made with standard wordpress blocks. If I change to use ‘Sections’ I can achieve making a section that is contained but full width so it is the full 1100px. But I ideally don’t want to use “sections” as I have all other content built using standard wordpress blocks.

I noticed you have a GenerateBlocks plugin so I installed that, but if I create a container block using the plugin, I cant get the full 1100px width, it still does it with gaps to the side of the block within the content area.

Is there a workaround or some CSS I can use to just get a simple bar underneath the featured image before the content begins?!

I may be missing something – it seems like it should be simple but I can’t seem to make it work!

Regards,

Adam

[David]

Hi there,

can you share a link to your site so we can advise.
You can edit your original topic and use the Site URL field to share the link privately

[Adam]

Hi David,

I’ve updated the topic to include url.

Basically I just want the title of the page in a bar the same width and colour as the menu bar, below the featured image.

Regards,

Adam

[David]

Try adding this CSS:

.entry-header {
    margin: -40px -55px 40px;
    padding: 20px 55px;
    background-color: #c7fdec;
}

@media (max-width: 768px) {
    .entry-header {
        margin: -30px -30px 30px;
        padding: 20px 30px;
    }
}

[Adam]

That’s perfect thank you.

Could you let me know what the CSS is doing to help me understand what will effect it?

Is it dependant on the size of the feature image? Or will it just work for each new page without any tweaking?

Thanks again,

Adam

[David]

The margin property is offsetting the Top, Right and Left Content Padding you set in Customizer > Layout > Container. There is CSS for Desktop and Mobile to match.

This: margin: -40px -55px 40px; = -40px TOP, -55px LEFT & RIGHT, +40px Bottom.

Then the padding value is putting the padding inside the container.

So if you change the Content Padding you will need to update those values to match.

[Author]

Posts