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:

The header BG
Welcome tag on the left
Logo in the center
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: website concept design

Sorry, the code wasn't showing correctly. There's my edits, else its all original joomla and rockettheme. I'll try upload my local build for you to take a look. =) — 4t0m1c

TimSPQR TimSPQR · Accepted Answer · 2014-01-09T09:03:20

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.

CSS gantry responsive header

3 Answers