How can I make a certain element made from CSS and HTML which is placed in the header to show only on one specific page?

Answer 1

Your question implies that your pages get generated through some sort of backend system. In order to help you, we would need to know what technology you are using to create your content.

On a very high level you might have the following options:

a) Your system might "tell you" which route (page) you are on. Often this leads to a class-name on the body-tag. In such a case, you can simply have a CSS based rule to show your content where applicable.

b) Your system provides additional rendering and such behaviour can be achieved by settings

c) Whenever you are facing such a problem, try to turn it around to find a solution. For example, do you have the possibility to show content based on which page you are on? If so, could you solve your problem by adding the header to every page BUT the target page?

d) JavaScript. While this will always work, please be aware that such hacks often lead to confusion in the long run as maintainability becomes unclear:

In your header:

<div id="element-on-page-x" style="display:none;">...</div>

Then, in JS:

let pageX = window.location.href.includes('page-x');

if(pageX){

let targetElement = document.getElementById('element-on-page-x');

targetElement.style.display = 'block';

}