Hide Pages bar in Manifest theme

  • Author
    Posts
  • #1671113

    hellonedman
    Member

    Hi everyone,

    I’d like to make two CSS adjustments to my blog, but I’m not sure how.

    First, I’d like to eliminate the “Pages” bar completely. I don’t have any pages I want to link to, and it’s distracting from the header image.

    Second, I’d like to change the size of the header image, making it a bit taller. The image file is 400 pixels high but it got cropped in the import.

    Is there any way to accomplish this? Thanks!!

    The blog I need help with is hellonedman.com.

    #1671189

    Hi there,

    First, I’d like to eliminate the “Pages” bar completely. I don’t have any pages I want to link to, and it’s distracting from the header image.

    #main-nav {
    display: none;
    }

    Second, I’d like to change the size of the header image, making it a bit taller. The image file is 400 pixels high but it got cropped in the import.

    The header will require a couple steps. First off, create a blank PNG image at 500 x 160 (transparent, no background) and upload that as your header image at Appearance > Header.

    Create and upload your new header image to the Media Library, get the URL of that image and replace URL_OF_IMAGE in the CSS below with the URL of that image.

    #header-image {
        background: url("URL_OF_IMAGE") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
        height: 400px;
    }
    #header-image img {
        height: 400px;
    }

    The reason for the blank, transparent image is so that we can keep the new header image as a home page link on your site since you are not using a standard site title.

    And, add the following CSS and go back to Settings > General and add in the site title. The following CSS will hide the site title, but keep it there in the HTML for the search engines to see (they like to find site titles on sites).

    #site-title {
        display: none;
    }
    #1671192

    hellonedman
    Member

    Thanks so much for the clear and easy-to-follow instruction! It worked perfectly.

    Let’s say I want to include a site tagline for search engine purposes, but also wanted to hide it visually. I’m guessing there’s a short CSS tag for that as well?

    #1671196

    Absolutely.

    #site-description {
    display: none;
    }
    #1671197

    hellonedman
    Member

    Thanks so much! You were a great help.

    #1671198

    You are welcome.

The topic ‘Hide Pages bar in Manifest theme’ is closed to new replies.