Remove header on specific page

Resolved

(@vivienzede)

Hi!
I use Zunnia and I can’t find a solution to my problem. I would like to remove the header, I mean the nav bar (with the menu items) and the title with the description.

I found that I’d probably insert something like
<?php if( !is_page( '1' ) ) : ?>
and
<?php endif; ?>
around the header that I want to disable (I have to replace 1 by the ID of my page, ok). But it seems doesn’t work, the entire page is blanck after that.

Here is the header.php text :

<!DOCTYPE html>
<!--[if IE 7]><html id="ie7" <?php language_attributes(); ?>><![endif]-->
<!--[if IE 8]><html id="ie8" <?php language_attributes(); ?>><![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!--><html <?php language_attributes(); ?>><!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<div class="BackTop">&uarr;</div>

<section class="wrap">

<section class="container">

<header class="header" role="banner">

  <nav class="nav" role="navigation">
    <?php wp_nav_menu( 'theme_location=top_menu&container_class=menu&menu_class=menu&fallback_cb=wp_page_menu&show_home=1' ); ?>
  </nav><!-- .nav -->

  <?php echo zinnia_heading(); ?>

</header><!-- .header -->

<?php echo zinnia_theme_slider(); ?>

Found something else, I also saw that I can modify style.css that way :
.header-title {display: block; margin: 0 auto;}
replacing by
.header-title {display: none; margin: 0 auto;}

However, it enable these elements on all the pages. Maybe I could write here a kind of “if” condition but I don’t really know anything about this.

Thank you for reading, will very appreciate any help about this!
Best regards,

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

Christine Rondeau
(@crondeau)

11 years, 11 months ago
The CSS way, is the way to do it.

What you want to do though is target that specific page.

If you look at the html source code, you’ll see (if you are using a good theme) that there are classes in the body tag.

You can use these to target specific page.

For example, you’ll probably have the class home on your home page or blog on the blog page.

So you could do:
```
.home .header-title {display: none; margin: 0 auto;}
```
and that would hide the title on the home page only.

Each page has an idea and there should be a unique class for it.
Thread Starter vivienzede
(@vivienzede)

11 years, 11 months ago

Hi!

I found something that work to. Basically, I enter in my page “Blog” from the WordPress Back Office, I switch to html code view and then I start with :
‘<style>
.header {display:none;}
</style>’

However, it seems that your approach is more interesting regarding how I planned this at the begining.

I want to try this. But it’s not totally clear for me at the moment, let me have a look!

Nevertheless, I’m gonna try, hope I understand how it work!
Thanks a lot for you interest, 🙂

Christine Rondeau
(@crondeau)

11 years, 11 months ago

I don’t think that you should add your css in your HTML editor.
If you switch back to visual mode you’ll loose your changes.

It’s much better to keep all of your CSS in one file.

if you can share a link to your site and the page that you want to affect, we can let you know what CSS to use.

Here are a few articles to read more about how to use the body tag:
http://codex.ww.wp.xz.cn/Function_Reference/body_class
http://www.nathanrice.net/blog/wordpress-2-8-and-the-body_class-function/
Thread Starter vivienzede
(@vivienzede)

11 years, 11 months ago
Alright, I create a custom page. Actually I duplicate page.php and rename pageok.php. At the beggining of the file I enter this code :
```
<?php
 /*
 Template Name: Pageok
 */
 ?>
```
In my wordpress panel I look for my ‘PageOk’ (that’s actually the ‘Mon CV en ligne’ page on the website) and I apply the ‘Page Ok’ model.

Then, I go to my style.css file. I replace :
‘.header-title {display: block; margin: 0 auto;}
`
by
.pageok .header-title {display: none; margin: 0 auto;}

But it’s doesn’t work, don’t understanding why…

You can see it there : http://meanwhileinwolfstreet.com/WordPress6/
Thread Starter vivienzede
(@vivienzede)

11 years, 10 months ago

I’m still stuck with that… Can someone show me how to add custom css for a custom page ? 🙁

Thread Starter vivienzede
(@vivienzede)

11 years, 10 months ago

Ok my bad, i didn’t have the good page ID.
Add custom css via Custom CSS plugin for wordpress and that’s it.
Thanks!

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

The topic ‘Remove header on specific page’ is closed to new replies.