Topic: Remove Header Page Only

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

Author

Posts
September 11, 2014 at 9:57 am #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.

September 11, 2014 at 5:13 pm #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">
```
September 13, 2014 at 6:37 am #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
September 15, 2014 at 2:35 am #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/
September 16, 2014 at 10:05 am #5924

Nancy Kline
Guest

Awesome. Thanks so much for your help!

-Nancy
Author

Posts

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