CSS gantry responsive header

Question

I've been googling up and down trying to find a solution but I really need some personal help. I'm trying to create a responsive header made up of 4 parts:

1. The header BG
2. Welcome tag on the left
3. Logo in the center
4. Social icons on the right

Here is a copy of the local version i'm working on: http://jaredbrandjes.co.za/joomla/test/

The header bg is 1920 wide and I've flipped it and duplicated it and made it repeat-x for any bigger screens. It only needs to scale a bit when the width is reduced to less than 500px. About 70% of its size should do the trick but I'm not sure how to do this.

This is the code i've inserted into the index.php to create my header bg:

<div style="background-image:url(/jaredbrandjes.co.za/images/template/headerbar.png); overflow:hidden; background-repeat:repeat-x;height: 366px;position: absolute;width: 100%;"></div>

This is my current code for elements 2,3,4:

<div class="gantry-img"><span class="gantry-img" style="text-align: left;"><img style="float: left;" src="images/template/header_welcometag.png" alt="" /></span> <span class="gantry-img" style="text-align: center;"><img style="display: block; margin-left: auto; margin-right: auto;" src="images/template/header_logo.png" alt="" /></span> <span class="gantry-img" style="text-align: right;"><img style="float: right;" src="images/template/header_social.png" alt="" /></span></div>

I'm trying to get the elements in a row first of all with the social icons vertically center of the logo and logo horizontally center of the page and not just the space to the right of the welcome tag like it is at the moment. Then, in terms of responsiveness, I would like the logo to remain absolutely center as the width reduces with the welcome tag on the left becoming smaller to fit and the social icons to fall beneath and centered. I hope this makes sense.

I'm using the rocket theme template, Hadron and joomla to try build my site. The header must expand the full way of the browser and must be able to respond to any screen size. I know gantry has some of these tools built in but I have no idea on how to incorporate them. Any help for any of my problems would be greatly appreciated ^_^

Thanks a million!

Here is an image of my site concept:

Answer 1

Thanks to the combination of answers here and some additional research I managed to accomplish my endeavors with the following code.

<div class="gantry-img">
<div class="gantry-img welcometag" style="text-align: left; width: 30%; min-width: 200px; float: left; max-width: 100%;"><img style="margin-left: 0; width: 100%;" src="images/template/header_welcometag.png" alt="" /></div>
<div class="gantry-img clogo" style="text-align: center; width: 40%; min-width: 100px; float: left; margin-top: 32px;"><img src="images/template/header_logo.png" alt="" /></div>
<div class="gantry-img socialcons" style="text-align: right; width: 30%; min-width: 200px; float: left; margin-top: 94px; margin-left: -5%;"><img style="float: right;" src="images/template/header_social.png" alt="" /></div>
<div style="clear: both;"> </div>
</div>

thanks to @ilias

then with some other research, made use of the @media all and added this into the css:

@media all and (max-width : 768px) {.welcometag{display:none;} .clogo{width: 100% !important; clear:both; margin-top: 5px !important;} .socialcons{min-width:100px !important; width: calc(100% - 10px) !important; clear: both !important;text-align: center !important;padding: 15px 5px 5px 5px !important;margin: 20px 0px 0px 0px !important;float: none !important;} .socialcons img{float:none !important;}}

What this does, is remove the welcome tag and reposition and scale the logo and social icons for any screen smaller than 768px wide.

Thanks to all who contributed =)

Answer 2

This, I think, will give you a start - fiddle.

HTML

<div class='topheader'>
    <div class='leftthird'>Welcome tag</div>
    <div class='righttwothirds'>
        <div class='centerdiv'>Logo</div>
        <div class='rightminidiv'>Social Icons</div>
    </div>
</div>

CSS

.topheader {
    width: 80%;
    height: 100px;
    background-image: url();
    border: 1px solid black;
    margin: 10px auto;
}
.leftthird {
    width: 33%;
    height: 100%;
    background-color: yellow;
    float: left;
}
.righttwothirds {
    width: 67%;
    height: 100%;
    background-color: transparent;
    float: right;
}
.centerdiv {
    width: 50%;
    height: 100%;
    background-color: green;
    color: white;
    float: left;
}
.rightminidiv {
    width: 50%;
    height: 100%;
    background-color: blue;
    color: white;
    float: right;
}

Put your background image in the topheader where I have the blank URL.

Play with it in the fiddle, even link your background images to it, then once you get it the way you want it, just copy it from the fiddle.

Answer 3

You should make the spans divs instead and then adjust their dimensions as you wish. Adjust alignment and minimum widths and they will wrap centered when you want them to.

<div class="gantry-img">
    <div style="text-align: left; width:30%; min-width:200px; float:left;" class="gantry-img">
        <img alt="" src="/joomla/test/images/template/header_welcometag.png" style="margin-left:0; width:100%;">
    </div> 
    <div style="text-align: center; width:40%; min-width:200px; float:left;" class="gantry-img">
        <img alt="" src="/joomla/test/images/template/header_logo.png">
    </div> 
    <div style="text-align: right; width:30%; min-width:200px; float:left;" class="gantry-img">
        <img alt="" src="/joomla/test/images/template/header_social.png" style="float: right;">
    </div>
    <div style="clear:both;"></div>
</div>