Remove Header Page Only

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #5913 Reply
    Nancy Kline
    Guest

    Hello. First of all I really like your Frontier theme. Now my question. Is there a way to remove the header on a single page only while still maintaining the width of the site that I’ve set with my original header. I’d like to publish some responsive videos on a password protected page. For various reasons I won’t go into I’d like to remove the header completely on this page only. When I choose the “blank” template under “page attributes” then my responsive video resizes to a humongous video that fills up the entire width of my screen – in my case I have a widescreen monitor. It looks fine on my android phone, but It’s really too big on a regular monitor as it’s only a 4:3 video (640X480). The videos look fine when I use the “no sidebars” option because the width is set by my header. But on the “blank” option it just goes as wide as whatever device your viewing it on. Thanks.

    #5914
    Ron
    Keymaster

    The easiest way to remove the header for one page is to hide it through css.

    Add this code on Frontier Options -> Custom CSS

    .page-id-108 #header {
        display: none;
    }

    You’d have to replace .page-id-108 with the class of your specific page. To get it, you need to visit the page. Right-click anywhere then select “View Page Source”. Find the <body> tag.

    Example:

    <body class="page page-id-108 page-template-default">
    
    #5918
    Nancy Kline
    Guest

    Thanks Ron. That worked well. So now I need to remove the nav bar on that page. So I did a little research to find the code. What I put in worked. But I’d like to make sure it’s stable or if you would suggest another code (I don’t really understand CSS – that’s why I’m not sure). Anyway, here’s the code I put in (xxx represents my page id number).

    .page-id-XXX #nav-main {
       display: none;
    }

    This is working to remove my nav bar. Should I stick with it?

    Thanks,
    Nancy

    #5922
    Ron
    Keymaster

    This is working to remove my nav bar. Should I stick with it?

    Yes. In your case the principle is the same in hiding the header and the main menu. You can even combine the code.

    Ex.

    .page-id-XXX #header,
    .page-id-XXX #nav-main {
       display: none;
    }

    https://ronangelo.com/learning-css-a-quick-useful-introduction/

    #5924
    Nancy Kline
    Guest

    Awesome. Thanks so much for your help!

    -Nancy

Viewing 5 posts - 1 through 5 (of 5 total)
Reply To: Remove Header Page Only
Your information: