remove header from home on Coraline theme

  • Author
  • #1154944


    I may have my terminology wrong, but what I mean by header is the block below title which lists all the different pages on my site. I really don’t want this to appear.

    tried various methods to get rid of it, no luck. I don’t really need header on any of my pages, so I’d be happy to have CSS code that eliminates the header block entirely.

    thesacredpath posted on a similar issue last year, but I’m not sure I fully understand.

    If you look in the opening body tag on individual pages, you will see a list of CSS classes that are declared, and one of those is the individual page ID which looks something like this: page-id-257 .

    I can’t seem to find the above. Where can these be found?

    The blog I need help with is



    ok – still stuck but no responses – I think I need to repost specifically about “opening body tag on individual pages”.



    a) It’s called the top navigation menu.

    b) The thread you linked to is irrelevant: it refers to the header image, and it refers to removing it selectively.

    c) You can easily hide the top menu by adding this:

    #access ul {
        display: none;

    d) The top menu can be removed even if you don’t have the CD upgrade. See this post of mine, at the very bottom:




    Thanks again –

    c) that works perfectly!

    b) (as a separate issue, unrelated to above) I’m still interested in finding out how to identify a particular page – ie how and where to find the page identifier. I’d really like to know what sacredpath is referring to and where it can be found.



    You’re welcome.
    To find the ID number of a page, you can go to Pages > All Pages, hover over the page title and look at the progress/status bar of the browser.
    Or you can edit the page and look at the address bar of the browser.
    Or you can visit the actual page and view the sourcecode.
    Or you can examine the page via Firebug in Firefox (or other similar extensions in other browsers).


    I like where your design is headed!

    Try it without the top and bottom borders:

    #colophon {
    	border: none;
    .hentry {
    	margin-bottom: 0;

    To target that rule so it just affects the home page, add a “.home” class to the front of each selector like this:

    .home #access,
    .home #colophon {
    	border: none;

    When working with absolute positioning in such a precise manner like you are (i.e. text needs to be placed exactly in a certain spot relative to the background image), it might be best to set position with pixels not ems. Also, it will probably help to do the positioning inside a relatively positioned element.

    Check out this page:

    And then try this example to see what I mean:

    .entry-content {
    	position: relative;
    #navigation2 h2 {
    	margin: 0;
    #navigation2 ul {
    	margin-left: 1em;
    #navigation2 {
    	position: absolute;
    	top: 280px;
    	right: 30px;
    	height: 130px;
    	width: 90px;
    	overflow: hidden;

    Note, it’s possible you’ll want to prefix all of those selectors with “.home” if that main graphic you’re using will just be displayed on the home page.

    Another trick I use to visualize things is to temporarily set a border so I can see things a little better. Here is an example you can preview:

    #navigation2 {
    	border: 2px dashed red;

    Try Inconsolata or Anonymous Pro for the site title on the Appearance → Custom Design → Fonts page to see if you like them. They both have a very technology-esque feel to them.

    Great work so far!




    Thanks for all that – along with justpi, it’s a tremendous help – some changes in effect – more to come

    currently working on trying to fix the footer i’ve inadvertently messed-up

The topic ‘remove header from home on Coraline theme’ is closed to new replies.