Hide Education Themes Header Image Logo From Displaying On Specific Pages

In this tutorial, i’ll show you one way to remove the header logo on specific pages of the Education child theme by StudioPress.

This question has been asked by Chris on the Community Forum:

I’m presently building a website for one of my client’s with the Education Child Theme.

Client would like to remove the logo from the home page.

The image was added by selecting the Header – Custom Header option from the Theme settings

Note: If you’ve added a header image using another method like CSS rather than the Custom Header function, you may need to find another solution.

Hide On Home Page

The easiest way to hide the logo on the home page is to add this CSS code at the end of the Education child themes style.css file:

.home #title a {
display: none;
}

Finding The Right CSS Classes

To find the right classes to use in the code which hides the image, simply right click the page you want to remove the image from and scroll down to the body class section in the code which you can see in this screenshot:

This gives us the selector class home

Then you will need to inspect the image you want to hide using a free web development tool like Firebug to find the classes.

This gives us the i.d class title a.

We then add the classes with the declaration display: none; to the child themes style sheet.

.home #title a {
display: none;
}

Hide On Single Posts

You can also remove the image from displaying on other pages, posts & archives simply by finding the correct class located in the body class section of your source code.

.single-post #title a {
display: none;
}

This code may or may not work on other themes depending on the classes used to display the image by default.

More Solutions For The Education Theme

• Add Different Size Logo & Header Images In Education Theme