Need help? Check out our Support site, then


center twenty twelve image header...?

  1. mccoycounselling
    Member

    Hi,

    I'm wondering if anyone could help me with how I could centre my header image. I've tried a few things that I've found on similar forums, but I haven't had any luck. Thanks in advance!

    The blog I need help with is bbandbd.com.

  2. Hi,

    Try adding the following CSS code to your Custom CSS (don't remove yours):

    @media screen and (min-width: 960px) {
        #masthead > a {
            position: absolute;
            top: 0;
            width: 100%;
            text-align: center;
        }
        .header-image {
            position: static;
            margin: 0 auto;
        }
    }
  3. Since you have set your site for a maximum page width of 100% (effectively, infinity), on browser window widths of 1200px and wider, your menu is going to be overlayed and hidden by the header image. You can increase the top margin for .main-navigation, but then at narrower window widths, there will be a wide gap between the image and the navigation. You can add the following, which will take care of the header issue and then you can play with the top margin on .main-navigation.

    .site-header img {
        width: 100%;
    }

    I would suggest limiting the maximum width to a fixed number such as 1200px or something similar. The existing max width was 68+rem, which in this case comes out to about 1045px in width. With a fixed maximum width, you can adjust for the spacing between the header and navigation much easier.

  4. mccoycounselling
    Member

    Thank you so much thesacredpath! Thus far, it's certainly looking better. As for your other suggestions, could you suggest what the css would look like for a fixed maximum width? (I'd start a new thread for this, but I'm assuming it's okay to ask, as it's somewhat related.).

    Also, as many others have noted: your presence in these forums is very, very much appreciated.

  5. Sure, in your body .site rule, change the maximum width to something like 1200px, such as below.

    body .site {
        margin-top: 2rem;
        max-width: 1200px;
    }

    You are welcome and thank you very much.

Topic Closed

This topic has been closed to new replies.

About this Topic