Twenty Eleven
[resolved] Problem moving Main over Header in child theme (8 posts)

  1. fifelskik
    Posted 4 years ago #

    I just launched a child theme of twentyeleven at http://DigitalGovGroup.com 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: http://connect.mailchimp.com/integrations/go-to-meeting.

    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.


  2. faugro
    Posted 4 years ago #

    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.

  3. esmi
    Forum Moderator
    Posted 4 years ago #

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

  4. fifelskik
    Posted 4 years ago #

    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.

  5. faugro
    Posted 4 years ago #

    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

  6. fifelskik
    Posted 4 years ago #

    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;)

  7. fifelskik
    Posted 4 years ago #

    It worked! (I grabbed your code before they deleted it) http://www.digitalgovgroup.com

    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.

  8. faugro
    Posted 4 years ago #

    you are welcome.

    well done, it look great.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic