Removing a header and footer from page template

  • Resolved BDeen

    (@bdeen)


    9 years, 2 months ago

    Hello, I am trying to remove the header and footer from certain pages of a website. I have created a custom page template for these pages and would like to edit the page template php file so that when this page template is selected the header and footer will not appear. Is this something that is possible or is there a different way this should be done. Any help would be greatly appreciated, thank you.

    Here is the page template I want to remove the header and footer from
    https://liveathlete.com/player-profile/

Viewing 13 replies - 1 through 13 (of 13 total)

  • BDeen,

    I’m not sure what your comfort level is with code, but a very simple method would be to target the page template with CSS and set the header/footer to display: none.

    .page-template-no-header-footer .skehead-headernav,
.page-template-no-header-footer #footer {
  display: none;
}

    This has it’s own drawbacks but not sure what your usability/UX goals are so this is kind of my “general purpose answer” for your situation.

    Thread Starter BDeen

    (@bdeen)

    Thank you for your help. I placed this in my CSS but it didn’t work.

    .page-template-profile .skehead-headernav,
    .page-template-profile #footer {
    display: none;
    }

    Is this correct? My page template is named profile.

    Do you have a page on the live site that’s using this page template so I could take a look at why that’s not working?

    Thanks!

    I just checked out the first page and saw you changed it to the new template, also the name for it when viewing source in Chrome inspector is .page-template-template-profile so the code should be:

    .page-template-template-profile .skehead-headernav,
.page-template-template-profile #footer {
  display: none;
}
    Thread Starter BDeen

    (@bdeen)

    Perfect! It worked! Your a life saver thank you so much!

    Glad I could help ??

    If you could also just mark this thread as ‘resolved’, that would be awesome!

    Cheers!

    Thread Starter BDeen

    (@bdeen)

    Will do!

    Thread Starter BDeen

    (@bdeen)

    Oops one more thing. I just noticed when you go to this page

    https://liveathlete.com/flowers/

    and you scroll the header appears again. This theme uses that style of header. Do you know how I can keep that from happening?

    Ah so it’s using JavaScript to add a new class/styles to the header to create a “sticky header” effect. It adds .skehead-headernav-shrink to it which is why it comes back. So you should add the following:

    #header.skehead-headernav.skehead-headernav-shrink {
  display: none !important; /* needed to override JS inline class */
}

    I normally try to stay away from adding !important to CSS but in this case it will be needed.

    Let me know if that fixes it for you!

    Thread Starter BDeen

    (@bdeen)

    It did fix a portion of it. Now it does not show the smaller sized down header when scrolling but the header is still there.

    https://liveathlete.com/flowers/

    I really appreciate your help with this. I have been having so much trouble with this.

    That’s odd, it looks like there is also a header ID that’s getting shown when you scroll back up, so adding this should do the trick:

    #skehead {
  display: none;
}
    Thread Starter BDeen

    (@bdeen)

    Perfect, thank you sir.

    Glad I could help ??

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Removing a header and footer from page template’ is closed to new replies.