Header covering title

Resolved PiaBrix
(@piabrix)

2 years, 2 months ago

I’m trying to do some rough models for a couple of new websites for some friends before we move along with some more detailed work.
Inspiro was chosen a theme, as it has several nice features, but we ran in to some bugs – and this one I cannot figure out..

The header is covering the title of the page when using the standard-template for the sites.
I have been trying different types of setups for the pages, but if I use the template without the title, the header just covers the topline of tesxt on the page.
I don’t understand the theme do this as default – I have installed it from scratch on multiple sites and all does the same with covering part of the title with the header…

If I remove the logo and don’t put on any text, the problem is gone … but any logo or text creates this problem.

How do I get some clean space between the header area and the title on the page.

Viewing 7 replies - 1 through 7 (of 7 total)

Ina
(@inamoro)

2 years, 2 months ago

Hi, @piabrix

What is the link to the website where this issue happens? Do you use the Default page template? https://prnt.sc/KikDOnFKIn9i

Thread Starter PiaBrix
(@piabrix)

2 years, 2 months ago

Hi Ina
Yes I use default template.
Tha page in this example is here: https://badeanden.brixtergaard.dk/blog/ as well as https://badeanden.brixtergaard.dk/kuld/
It happens any time I use the default template – also in here:
https://brixtergaard.dk/links/
Ina
(@inamoro)

2 years, 2 months ago
@piabrix this is influenced by the size of the logo. Add the following code to Appearance -> Customize -> Additional CSS:
```
#content {
    padding-top:160px !important;
}
```
Thread Starter PiaBrix
(@piabrix)

2 years, 2 months ago

And that works really well with pages with only a title.

But on the pages with featured image, is mess things up again …
https://brixtergaard.dk/om-koraten/
https://brixtergaard.dk/wp-content/uploads/2024/03/header-issues.png

can it really be, that I can’t have featured image on some pages – and some pages without?
The wierd thing is – I made the logo just to the exact format the template wants it to be – 400 x 100 pixels. I did not crop it when uploaded – but cropping it dosn’t make any difference.

What format should the logo have, not to make this issue?
Ina
(@inamoro)

2 years, 2 months ago
@piabrix as you can see at the cropping step, the theme is adapted for horizontal logos, not squared ones like in your case: https://prnt.sc/zZQR9vSYTjuM

Even if you fit the logo in a 400x100px rectangle, it will still have blank space around it and will influence the size of the displayed logo.

This is also the case for the other logo (it includes white space after cropping): https://prnt.sc/71hkX7ym_l0S

Try replacing the previous code with this one:
```
.has-header-image #content {
    padding-top: 0px !important;
}

#content {
    padding-top:160px !important;
}
```
or
remove the previous code and add the following one to make the logo smaller:
```
.custom-logo-link {
    max-width: 200px;
}
```
You can adjust the 200px value as you need.
Thread Starter PiaBrix
(@piabrix)

2 years, 2 months ago
Perfect – that works great 😀
- This reply was modified 2 years, 2 months ago by PiaBrix.
sourabhmattu
(@sourabhmattu)

1 year, 10 months ago

Ina(@inamoro)

Hy my name is Sourabh Mattu. and it resolved my problem thanks.