Failing to vertically manipulate some images and text

[schwim]

Hi there everyone!

I’ve been asked to faithfully reproduce a Wix header and footer so they can use the design in an MLS search system and it’s been rough but I’ve managed to get the menu area right on but I’m having a problem with the social buttons and text above it. I’m able to shift the content horizonally back and forth but when I try to move the elements up and down, they don’t want to move.

It seems each element needs to be shifted independently because none of the various elements seem to match each other in their vertical alignment which has just been a bear to try to figure out.

I’ve managed to get the three far right images spot on but then it begins to fall apart. Could someone tell me what I need to do to be able to vertically manipulate that text and those images?

Wix page: http://www.therkg.com/home
My page: http://schw.im/techguys2/

Wix area:

My area:

[PaulOB]

Try a bit of flexbox.

#header-top-inner{
    display:flex;
    justify-content: flex-end;
    align-items:center;
}
#header-top-inner > *{margin: 0 0 0 10px;}
#header-top-inner img{display:block;}

[schwim]

Hi there Paul and thanks very much for the help!

I’ve added the css and while it did shift things more inline, I still need to be able to manipulate the text spans and images vertically some to make it as close to the original as possible. With the new css, how would I go about manipulating the vertical alignment of both the images and spans?

I’ve updated the link to reflect the latest version. I’ve tried a few different things but haven’t figured it out yet.

[schwim]

Ah, I’m so close! The content in my version is like 2px too low:

Wix page: http://www.therkg.com/home
My page: http://schw.im/techguys2/

And I thought changing

#header-top-inner > *{margin: 0 0 0 8px;}

to something like

#header-top-inner > *{margin: 1px 0 0 8px;}

Would shift it but it’s not doing anything. What do I need to do to shift my content just the tiniest bit upwards?

[Ray.H]

@schwim

Ah, I’m so close! The content in my version is like 2px too low:

@schwim

Would shift it but it’s not doing anything. What do I need to do to shift my content just the tiniest bit upwards?

Hi,
Your #header-top div is absolute positioned with these rules…

#header-top {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    margin-bottom: 17px;
}

And you have a 10px top padding on your…

#header {
    position: relative;
    background-color: #e8e8e8;
    height: 50px;
    padding-top: 10px;
    text-align: center;
    font-size: 30px;
    color: white;
}

To shift your content up 2px you can remove the bottom offset and bottom margin from #header-top.

Then position it from the top while accounting for that 10px top padding on #header (the containing block).

#header-top {
    position: absolute;
    top: 8px;
    left: 0;
    width: 100%;
    text-align: center;
}