Different header content on different pages

BB Theme
1

Hi support,

Is it possible to have different header content on different pages within one site using BB and if so how would I go about it?

Thanks, Gerry

2

Hey Gerry,

You wouldn’t be able to do this without writing some custom code. The Page Builder plugin doesn’t affect the header, so that wouldn’t help. The Beaver Builder theme doesn’t have any functionality to change the header on different pages. You would likely need to over-ride the default header on a page-by-page basis (which is doable with some custom coding).

Sorry if that’s not the answer you were hoping for. Let me know if you have any other questions.

3

Hi Robby,

Thanks for support, I suspected that might be your answer although it doesn’t change my very high opinion of BB products and support :slight_smile:

I’ve come across a plugin that may provide a solution, could you give an opinion on this?
https://wordpress.org/plugins/unique-headers/

Thanks,

Gerry

4

I just did a quick test, and I am afraid that plugin won’t play well with Beaver Builder. We don’t use WordPress’ built-in custom header functionality as the plugin requires.

Do you only want to adjust the background image of the header on a page-by-page basis? If that’s the case, I can probably walk you through the process of doing that with CSS. It shouldn’t be too difficult.

5

Hi Robby,

Thanks for supporting me.

This is a feature that I may need to use on a project that’s due to start soon, I’d much prefer to use BB theme and plgin to build the site. The custom header would be on a page by page, would we need to work on the live site to walk through the CSS or could you let me have something to work on now?

Thanks,

Gerry

6

My pleasure!

If you just need to have a different header image on each page, this is pretty simple with CSS. WordPress adds a class to the body tag with a page’s ID. So you can use that class to target a specific page. So you could use CSS to do something like this:

.page-id-25 .fl-page-header {
    background-image: url('image-url-here');
}

Again, this would only work for background images or color. I can’t quite tell if that will suffice for your needs. Please do elaborate more on the requirements for the pages/headers if you’d like :slight_smile:

Thanks Gerry!