Tagged: , , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #26137


    You can Inspect Element with Google Chrome, look for the unique body class id of the page.

    On the image above, the body class id is .page-id-2251, yours will be different. Use it to change the background image of the logo. Add this on your custom.css or Quick CSS

    .page-id-2251 .logo.bg-logo img {
    position: absolute;
    left: -9999px;

    .page-id-2251 .logo.bg-logo {
    background: url(../images/layout/logo.png) no-repeat center;
    display: block;
    height: 116px;
    width: 210px;




    Thanks Ismael, I really appreciate the response!

    I changed the code to:

    .page-id-115 .logo img {
    position: absolute;
    left: -9999px;
    .page-id-115 .logo {
    background: url(http://linxhome.com/wp-content/uploads/2013/07/linxhome-red.png) no-repeat center;
    display: block;
    height: 65px;
    width: 200px;

    That displays the different logo (of course I changed it to the right page ID and fixed the dimensions for my logo). I should however probably clarify and mention I am using the ‘Fixed Header with Social Icons and additional navigation’. So I actually knew how to change the css but that just moves the original logo from view and places in the new logo in a fixed position, which would work with most themes. What I was trying to do was actually replace it because with this theme as you scroll, the image readjusts itself. My problem is placing in the new logo via css means it doesn’t adjust as the original would. The image below shows the variation logo that has been replaced using css and how it looks once you’ve scrolled down the page. I did attempt using the javascript replace function, but was unsuccessful. I’m more familiar with css, not js.


    It may not be possible, but hopefully you can see something I’m not. Thankyou!!


    Hi thedeancorp,

    The only thing I can think of outside of creating an alternate header.php file to load into the page just for the logo would be to use jquery to switch the image on page load. There will be a split second delay since it has to load after the window is loaded but not sure what else.

    See this codepen: http://codepen.io/DevinVinson/pen/mvoDk

    The javascript would be added to your js>avia.js file just above the document ready function start. You will also need to change the .logo a img to the direct location of your logo which will be more like:

    .page-id-115 #wrap_all #header #header_main .container .logo img




    Hi Devin,

    That jquery worked! I think the split second load is fine. And everything seems to be working great! Thanks.




    Glad it is fixed. :)



Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Custom Logo for Specific Page’ is closed to new replies.