multiple headers possible

Hi Dave,

Glad to hear you’re still enjoying Tracks ??

Since the Header Image is a background image applied to a div element, you can swap it out with CSS.

Here’s an example that will target this page:

.page-id-10 .header-image {
  background-image: url('https://www.lostinspace.ch/wp-content/uploads/2017/05/header_lostinspace.jpg');
}

There are two parts you need to edit.

First, replace the “10” in “page-id-10” with the page you want to target. You can get the page ID from the browser address bar in the editor (tutorial).

And second, you’ll want to update the URL to point to a new image on your site. The URL in the snippet is pointing to your existing header image.

If you want to use that snippet for multiple pages, you can just copy and paste it and repeat it as many times as needed.

thank you for the feedback and i thought it will be so easy! but unfortunately it does not work. must the size of the image be identical to the “normal” header image?

i also tried it with other IDs, but even there my header stays.

subsite
https://www.lostinspace.ch/campervan/

css edit
.page-id-1862 .header-image {
background-image: url(‘https://www.lostinspace.ch/wp-content/uploads/2022/01/header_campervan_05.jpg’);
}

in the post before a apostrophe at the end is not displayed correctly …05.jpg’);

There are a few things that could be happening.

First, since you’re using the Autoptimize plugin, you may have to empty your cache before the new CSS takes affect.

Otherwise, the CSS may be getting overridden by the default CSS. You can try adding an !important tag, like this:

.page-id-1862 .header-image {
  background-image: url('https://www.lostinspace.ch/wp-content/uploads/2022/01/header_campervan_05.jpg') !important;
}

If these solutions still don’t help, please link me to the page where you’re adding a new header image and that will help me debug the issue.

cool, the “important” was the solution.cache, cookies & co. I had of course already deleted or deleted all caching plugins (also work in IT, but unfortunately very little knowledge in html, php, etc.).

many thanks ben & I have you respectively the company now added to my links and in the footer, because I’m just incredibly happy with the theme and the support ??

cheers, dave

and would you also have the code ready so that the menu (id-1862) is not displayed?

thx, dave

Thanks, Dave!

Here’s how you can hide the primary menu on a specific page:

.page-id-1862 .menu-primary-items,
.page-id-1862 .menu-primary .menu-unset {
  display: none;
}

thanks Ben, but this code disables me everything and not only the menu “campervan”. i do not use the function “menu” in wordpress and have all pages set up individually or only with the function “parents”.

Okay I see. That code was written to hide the menu on page 1862, but this new snippet will hide the menu item for page 1862:

.menu-primary .page-item-1862 {
  display: none;
}

I’d also recommend trying out the menu feature in WordPress. It makes it pretty easy to choose which items appear in the menu and reorder them. You can also edit the menu labels independently of the page titles, which can be helpful.

Thx Ben – it works fine ??