Support » Theme: Twenty Eleven » [Theme: Twenty Eleven] Problem moving Main over Header in child theme

  • Resolved fifelskik


    I just launched a child theme of twentyeleven at and I’m having trouble using a negative margin in the div #main. Here’s an example of what I’m trying to do on the Mailchimp website:

    Right now, I’m achieving the affect of rounded corners and ‘bumped up’ #main area with an image (which is less than ideal).

    I would much rather use this code:

    margin-top: -30px;
    -webkit-border-top-left-radius: 9px;
    -webkit-border-top-right-radius: 9px;
    -moz-border-radius-topleft: 9px;
    -moz-border-radius-topright: 9px;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
    background: #FFF;

    The problem is, the negative margin brings the #main area UNDERNEATH the header, not on top of it. Can anyone help me figure out why? Thanks.

Viewing 7 replies - 1 through 7 (of 7 total)
  • i think the problem is in z-index, but if you make #page is greater than header, the dropdown menu will be UNDERNEATH the #page.
    so, my suggestion : you must make another # below the header.



    Forum Moderator

    Try using Firefox with the Firebug add-on for this kind of CSS work.

    I’ve been using Chrome’s tool instead of Firebug, but it’s pretty much the same type of CSS viewer.

    The main issue is that using a negative top margin (-30) on either #main or #primary brings my content under the header instead of on top of it. I’m sure I’m overlooking something obvious.

    @faugro, sorry, I’m not quite sure what you mean.

    twentyeleven-child > style.css, line 115

    header#branding {
    height: 230px;
    min-width: 950px;

    reduce the height about 30px
    remove background from style.css line 109

    create new # below #branding, with 30px height, to replace those code with yours, but don’t forget the margin. For example :

    [code moderated – please use the pastebin]

    define all those code in header.php after </header>

    <div id="brandig-bottom"><div id="brandig-bottom-with-border-radius"></div></div>

    good luck

    Thanks, @faugro. I’m installing a test site on my server right now to try out the style changes above on a duplicate site that is not currently live. I’ll report back;)

    It worked! (I grabbed your code before they deleted it)

    The only change to your code was that I had to add a height to the second # in order to be able to see the white space. Thanks so much for your help – I spent HOURS trying to figure this one out.

    you are welcome.

    well done, it look great.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Theme: Twenty Eleven] Problem moving Main over Header in child theme’ is closed to new replies.