[TimmidParticipant]

Hi There,

With custom css from the forum i’ve managed to get a nice responsive header image on my website. But i would like to have a different header image on every page. Is this possible?

Website url is: http://thejourneynederland.com/website/

Thx in advantage!

[ChristianModerator]

Hey Timmid,

That is technically possible however, would fall beyond the scope of our support as that would require custom development.

Thank you for understanding.

[TimmidParticipant]

Ok, thx for your time.

[DarshanaModerator]

Hi there,

Actually you can use the Page IDs (http://screencast.com/t/RQm9B80IB0P) with the following CSS workaround to achieve that. Place the following code into your Customizer, Custom > CSS area by adding different background image links.

page-id-2 .x-navbar {
    background-image: url("http://www.background.image/link.jpg");
}

page-id-22 .x-navbar {
    background-image: url("http://www.background.image/link.jpg");
}

page-id-24 .x-navbar {
    background-image: url("http://www.background.image/link.jpg");
}

page-id-26 .x-navbar {
    background-image: url("http://www.background.image/link.jpg");
}

page-id-28 .x-navbar {
    background-image: url("http://www.background.image/link.jpg");
}

Hope that helps.

[holahola84Participant]

I see you have managed to solve it Timmid, nice! I guess I will add to this topic since I am having the same issues. The coding above didn’t work for me. Can any support staff or Timmid assist me? I am testing on my localhost and have added the following css style.

.x-navbar-inner {
background: url('http://localhost:8888/vaqodesign/wp-content/uploads/2015/06/Web-Design-Concept.jpg') 
no-repeat top center;
}

page-id-7 .x-navbar-inner {
background: url('http://localhost:8888/vaqodesign/wp-content/uploads/2015/06/Web-Design-Concept.jpg') 
no-repeat bottom center;
}

But page-id-7, which is my portfolio page, still inherits the global navbar style. How can I fix it?

[Rue NelModerator]

Hey There,

It should be .page-id-7 you forgot the period. You can also make use of these codes to have a default image for the single posts, pages and your archive pages.

/* Default image */
.x-navbar-inner {
   background: url('http://localhost:8888/vaqodesign/wp-content/uploads/2015/06/Web-Design-Concept.jpg') no-repeat top center;
}

/* default single post image */
.single .x-navbar-inner {
   background: url('http://localhost:8888/vaqodesign/wp-content/uploads/2015/06/Web-Design-Concept.jpg') no-repeat top center;
}

/* default page image */
.page .x-navbar-inner {
   background: url('http://localhost:8888/vaqodesign/wp-content/uploads/2015/06/Web-Design-Concept.jpg') no-repeat top center;
}

/* default archive image */
.archive .x-navbar-inner {
   background: url('http://localhost:8888/vaqodesign/wp-content/uploads/2015/06/Web-Design-Concept.jpg') no-repeat top center;
}

Hope this helps. Kindly let us know.

[holahola84Participant]

Hey it works perfectly. Thank you!

[Paul RModerator]

You’re welcome!

[dotcomdesigngrouopParticipant]

Do you know how to make the header image link to a URL other than the homepage?

(e.g., https://www.funnydummy.com/comedy-shows/ instead of https://www.funnydummy.com)

Thanks in advance!

[NicoModerator]

Hi There,

About your concern, you can follow this thread below,

https://community.theme.co//forums/topic/change-main-logo-link/

You can search more solution on the search box above this thread for more ways to change the link. The answer above uses a javasript

Hope it helps.

Thanks.

[dotcomdesigngrouopParticipant]

That specific solution doesn’t work if someone clicks the logo while on the actual page; however, another of your solutions works flawlessly:

https://community.theme.co//forums/topic/ability-to-set-custom-logo-url/

You guys do GREAT work. Thanks!

[ZeshanMember]

You’re welcome! 🙂

[Antony HParticipant]

Wow, this looks like an awesome trick – but how do I know the page ID for my homepage please? I can only seem to find post ID [which is 2], but when I put .page-id-2 it doesn’t work.

Thanks!

[Prasant RaiModerator]

Hello Antony,

Thanks for writing in!

The process of locating page is very similar. You can open the page and get to know Id from URL or by hovering over link of the page that you’re interested in getting the ID. Please see attached screenshot.

Thanks.

[Antony HParticipant]

Sorry, I just spotted this reply. Thanks for your help.

[Author]

Posts