Centering Header In Metro Theme

Community Forums Forums Design Tips and Tricks Centering Header In Metro Theme

This topic is: not resolved

Tagged: , ,

This topic contains 1 reply, has 2 voices, and was last updated by  braddalton 1 year, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #55707

    taxiecabbie
    Participant

    I’ve been tinkering around with the Metro theme for a bit, and I feel as though this should be a very easy thing to fix, but I absolutely have not been able to figure it out. I moved the “header” section out of the wrap on the Metro theme, but now nothing I seem to try for love or money will get the header to center. This is what the CSS in the header section looks like currently:

    #header {
    min-height: 0px;
    overflow: hidden;
    }

    #title {
    padding: 20px 0 16px;
    padding: 1.25rem 0 1rem;
    }

    #title a {
    line-height: 1;
    padding: 8px 16px;
    padding: 0.5rem 1rem;
    }

    .header-image #title a {
    padding: 0;
    }

    .header-image #title {
    padding: 0;
    }

    .header-full-width #title,
    .header-full-width #title a,
    .header-full-width #title-area {
    width: 100%;
    }

    .header-image #title,
    .header-image #title a,
    .header-image #title-area {
    display: block;
    min-height: 300px;
    }

    .header-image #title,
    .header-image #title a {
    width: 100%;
    }

    I’ve been trying various combinations of ‘margin:auto’, tried absolute positioning and even tried just getting it to budge by a few pixels, but the image just stays stubbornly left-aligned. I figure there must be something very simple I’m missing. Thanks to anybody who can point out what it is. If a picture of the website is needed I am happy to provide, but since I’m building on MAMP the address below won’t give you anything useful. :)

    http://laurahancock.com
    #56648

    braddalton
    Participant
    Post count: 9789

    Try this http://wpsites.net/web-design/customize-header-logo-banner-images-in-metro-theme/#Full_Width_Header

    You could layer it over a transparent background which is the same width as the default header settings which would be the easiest solution.


Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.