Title no longer visible

tracyrosen
(@tracyrosen)

1 year, 5 months ago

Hello,
I have set my header title to be black on white, then white on black background when hovering. Everything has been fine until recently. I first noticed this today (though it has been a few days since I have visited the site.)

The hover is fine, the title no longer appears unless you hover. I am guessing it is there, but white on white.

Any ideas on how to fix this?

Things I have tried so far:
Re doing the settings in the site editor.
Using custom css:
setting a to black
setting h1 to black

Oh! While writing this, I checked to see if it affected any other headings besides the title and it only impacts the title on the homepage. The blog title on this page is not affected.
https://fnaesc-cspnea.org/courses/

The homepage uses a static page, called Home. I have it set so that the page title Home does not appear. Could it be that it is making the blog title have the same behaviour?

And now that I poke around – I am not sure how I hid the page title. Is it possible that there was a setting for that in the page editor that has been removed?

Any help is appreciated! I am going batty with this.
Thank you.

The page I need help with: [log in to see the link]

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

Michal Czaplinski
(@czapla)

1 year, 5 months ago

Hi Tracy!

Looking at your site, it indeed does seem that you have set the color of the header on your Home page to “white” which is the same color as the background making it invisible unless you actually hover over it.

I ll assume that you want the header on your Home page to be black just like on your /courses page. You can try going to the Appearance > Editor in the sidebar and should be able to change the color of your heading for the Home page.

I don’t think you should need custom CSS in order to achieve this so best perhaps disable any custom CSS that you might have added in order to make sure that it’s not interfering with the default CSS!

Hope this helps!

Thread Starter tracyrosen
(@tracyrosen)

1 year, 5 months ago

Hi and thanks for your response!
Yes, the reason I am asking is because my template settings seem to be set correctly for what I want.
Here are some images of my settings so you can see what I mean.

The additional css I mentioned above, I tried and then deleted it when it didn’t work. You can see the additional css I have now via the same link as the settings.

I am baffled 🙂

Thread Starter tracyrosen
(@tracyrosen)

1 year, 5 months ago

I have been poking around between my two sites that use twenty twenty two to see if I can explain why one is having this issue, it is truly confusing me!

@zoonini do you have any idea why the header would behave differently on the homepage than on other pages?

(I tagged you here because you have been super helpful with other issues I have had!)

Thank you!
Tracy

Moderator Kathryn Presner
(@zoonini)

1 year, 5 months ago

@tracyrosen This is actually on my list to look at today, I’d poked around yesterday to no avail but will take another peek later!

Thread Starter tracyrosen
(@tracyrosen)

1 year, 5 months ago

Thank you, I appreciate that so much. I feel like I have stared at it for so long that I am no longer able to see anything!

Michal Czaplinski
(@czapla)

1 year, 5 months ago

Looking at the structure of the HTML of your site, I think that inside of the template for your Header on the Home page you have put 2 different Group blocks.

In each of those Group blocks, it seems that the link color is set to white.

Could you try to remove that link color setting from those Group blocks and see if this helps?

—

That said, I think that your expectations were correct and your issue is still a problem with the block editor itself! It seems to me that those colors should not have been overriden in the first place. I will investigate this to be completely sure and ensure it’s fixed.

Moderator Kathryn Presner
(@zoonini)

1 year, 5 months ago

@czapla Thanks for digging in further!

@tracyrosen let us know if Michal’s suggestion does the trick…
Michal Czaplinski
(@czapla)

1 year, 5 months ago
@tracyrosen I dug a little deeper into your problem and I can reproduce it on a fresh site using the block editor. However, the problem is that on your Home page you have three Header template parts nested inside of each other.

Nesting headers produces invalid HTML which is what seems to be breaking your site!

Would you be able to achieve your desired layout without nesting those Header template parts?
- This reply was modified 1 year, 5 months ago by Michal Czaplinski.
Thread Starter tracyrosen
(@tracyrosen)

1 year, 5 months ago
Thank you for looking into this further! It helped me to find a fix for now 🙂

But first, to respond to your question about nested headers.
I am trying to remember how I created this, if it was me who did.

I *may* have separated the navigation from the header block so that it would appear below the side-by-side logo + title and not all stacked on top of each other. I highlight may because I tried many ways and I’m really not sure which one eventually worked.

Also, when I look at the template part, it is Header (dark, large) and within it, it seems to call on Header (dark, small). And any customizations I make do work on the navigation block but not the site title block (see slides here, I added new ones.)

Since I haven’t changed anything specific to make this happen… and it seems to have happened directly after the latest update… is it possible that somewhere in the background, code has changed to make this happen?

Inspector reveals that there is a setting for all text in this header to be white. And it seems that this setting may be overriding the custom changes to text and link colours in the site editor but only for the site title, not the navigation block or cover block. (see slides 6 and 7 at the link above)

So… my fix is to add custom css for site title h1 (see slide 8 in link above). It seems strangely separate from the other elements of the header (but only on the homepage, which used Header (dark, large). This wasn’t happening on the other pages, which uses Page, no separators and calls on Header (not large or small or dark or whatever) (which is also called on within the dark large header page… so that may be the nested blocks issue? But I am pretty sure I didn’t do that, it’s how it came 🙂 )

I hope all of this makes some kind of sense to you and thanks so much for all your support!
Tracy
- This reply was modified 1 year, 5 months ago by tracyrosen.
Thread Starter tracyrosen
(@tracyrosen)

1 year, 5 months ago

Could the nested header issue be caused by a static page being used as the front page? So it would be using the page template + being given the front page template when its used as front page? I don’t know, thinking out loud here…
Michal Czaplinski
(@czapla)

1 year, 5 months ago
Inspector reveals that there is a setting for all text in this header to be white. And it seems that this setting may be overriding the custom changes to text and link colours in the site editor but only for the site title, not the navigation block or cover block. (see slides 6 and 7 at the link above)

Indeed, it seems that the Group block is setting the link color to white which is why I suggested that you remove that setting from it 🙂

my fix is to add custom css for site title h1

This will also work as a workaround 🙂 But the issue remains that you have 3 nested <header> elements on your page which are not valid HTML and can cause problems down the road.

If you click on the button in the toolbar with the 3 horizontal lines when editing your Home page in the site editor, it should reveal to you the hierarchy of your blocks. There, you should see that there are 3 distinct Header template parts that are each nested within each other. While this might have accidentally worked before, it is not valid HTML and should not be expected to work. Could you try to restructure that top-level Header so that it does not contain other Header template parts?`

Could the nested header issue be caused by a static page being used as the front page? So it would be using the page template + being given the front page template when its used as front page? I don’t know, thinking out loud here…

I’m not sure I completely follow you here. There is no such thing as a separate “Front page” template. If your Home page is a static page then this static page has its own template which is what you have been editing.
- This reply was modified 1 year, 5 months ago by Michal Czaplinski.
Thread Starter tracyrosen
(@tracyrosen)

1 year, 4 months ago

Hello,
Ok, I had only been checking the actual header blocks in terms of the colour settings. Using the 3 horizontal lines, I see what you mean now about the group blocks. I think if I reset those blocks, I should be able to modify the colours of all the blocks within the group.

(Though, it still doesn’t explain why I was able to customize all other blocks within the group except for the site title.)

And yes, that worked – I removed the custom css and my title appears on the homepage – yay and thank you!

As for the headers.
I have a feeling it is from my attempt at separating the navigation from the logo + title. So that logo + title are grouped horizontally and the navigation is stacked under them.
(I tried so many ways, so it is hard to pinpoint exactly how I got the result I wanted now, a few months later.) But they both point to the same block, as in, if I delete either of them, the header disappears.

(And now that I think of it… if the navigation and the logo+title are in separate header blocks, that would possibly explain why I could modify the nav but not the title.)

So what do you suggest re: the nested headers?
Is there any other way to get the result I described?

Thanks again for plugging away at this with me!
Michal Czaplinski
(@czapla)

1 year, 4 months ago
> So what do you suggest re: the nested headers?

I think you could create new Template Parts that are NOT headers but include the same content as the current headers. Then you can use those Template Parts inside of your Home template.

Let me explain in more detail:

– On you HOME page now you have 3 nested Header template parts. Let’s refer to them as top header (that’s the one that wraps all the other ones), middle header and bottom header.
– Open the bottom header (I think that’s the one that only contains the title and logo) and go to the code editor and copy its contents.
– Create a brand new Template Part (let’s call it something like “bottom header contents” and paste the contents there.
– Repeat this for the middle header (let’s call it something like “middle header contents”).

Then, go to the top header Header template part on your Home page. Remove the middle header and the botom header and replace them with “middle header contents” and “bottom header contents” template parts.

I think this should clean up the structure of your site without any issues, but since I cannot access your wp-admin I cannot test this so take the usual precautions of saving your changes so that you can revert when anything goes wrong.

I hope this helps! 🙂
- This reply was modified 1 year, 4 months ago by Michal Czaplinski.
Thread Starter tracyrosen
(@tracyrosen)

1 year, 2 months ago

@czapla – thank you and I am sorry for dropping this 2 months ago! Travel for work back then, then the winter break, then illness … I am trying to apply this fix now.

Ok. So I created a general template part called bottom header contents and when I paste the contents in… it pasted them in as a header. That had me flummoxed for a moment. But then I saw that I could copy the contents of the header easily via the outline on the left sidebar without copying the header designation (thank you for introducing me to that outline list feature!)

I think it works now. I feel like I may still have some playing around to do with content widths for different elements on different templates but it looks pretty much like it did before and with only one header.

Thank you SO much for sticking through this with me! It’s the beginning of a site that will likely grow much larger so having correct structure is important for me. Especially now that I need to translate the whole thing into another language… 🙂

Hopefully I don’t have any other major structural issues I need to resolve.

https://fnaesc-cspnea.org/

Michal Czaplinski
(@czapla)

1 year, 2 months ago

Great! I’m glad that I was able to help. Happy WordPressing! 🙂