Different Logo/Header for Pages/Categories

Hi Movin,

I am using the Activello theme and I would like to have a different logo/header image for my different pages and categories. I have installed the plugins you mentioned from another thread…

I am able to select custom headers in the pages and posts area but they do not load on my website.

I tried using the custom css that was mentioned in the other post as well but couldn’t get it to work.
here is the link to my website: http://www.living-chronicles.com/

Hey there,
Hope you’re doing well today

The theme’s widget-based architecture, unfortunately, makes this feature an incredibly difficult one to implement within the theme, and that would require a considerable amount of deep theme modification.

Your best bet right now would be to try searching www.wordpress.org/plugins/ or codecanyon.net/ for a plugin that works.

Please let me know if there are any other questions that I may help with. :slight_smile:

Best Regards,
Support

I have attached images of the codes that were mentioned in another thread that were used to achieve different headers on pages and posts. Is this not applicable to my website? The header is actually the logo that was edited to act as a header image?

Thank you so much for your help!

Could you please share the topic URL from where you have taken that code?

https://colorlibsupport.com/t/header-for-blog-page/

Hey there,
Hope you’re doing well today

I’m not sure why I didn’t come across this while searching the forums for a solution to this initially, however, it basically gave me a clue. With the code below, you’ll need to add the page-id or post-id of the page you’re trying to set a custom header for. Do this for both codes. You’ll find that in the body tag (close to the top) of your page upon inspecting it with a tool such as Chrome’s Inspector. In addition to that, you’ll also need to change the height to suit your image.

Just add and save the following code to Appearance > Customize > Additional CSS:

#logo .custom-logo-link {
    display: none;
}

nav.navbar.navbar-default:after {
    content: "";
    display: block;
    width: 100%;
    height: 250px;
    background-size: 100%;
    background: url("your image here");
}

I hope this helps :slight_smile:
Best Regards,
Support

Hello!

Thank you so much for your help! When I entered the additional CSS and placed my image link into the code the image changed! I apologize because I’m very new at this and I am not sure where I need to add the page-id and post-id within the custom css to get it to only change on one page or category?

Thank you!

Mallory

Hello there,

First of all, you would have to find the page or post id which is in the URL of the page or post when when you edit them.
Here is a link with details:

To add the post/page id, you would simply need to add the page or post id at the start of the CSS code. Here is an example:


.postid-2279 #logo .custom-logo-link {
    display: none;
}

Best Regards,
Support

Thank you so much! That worked!

One more thing, is there something I can add to the CSS to make the new logo responsive to screen size (computer vs. Iphone?

Hi there,
Thanks for keeping in touch with us.

In the initial code that changed the background, changing the background size to contain!important should solve for responsiveness. The current setting for that is 100%, so changing that should help.

Please let me know if there are any other questions that I may help with. :slight_smile:

Best Regards,
Support

You have been so helpful, thank you!

I did run into another problem when I set the background size to contain!important. If I leave the height set to px, the image will start repeating itself depending on the screen size. So it’s responsive now, but I’m not sure how to keep it from repeating. If I set the height to a percentage it doesn’t show up.

Thank you for your continued support!

Mallory

Just after the background property in your custom CSS code, add following property.


background-repeat: no-repeat;