center twenty twelve image header…?

  • Author
    Posts
  • #1670719

    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.

    #1670854

    hfzrhmn
    Member

    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;
        }
    }
    #1670857

    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.

    #1670871

    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.

    #1670873

    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.

The topic ‘center twenty twelve image header…?’ is closed to new replies.