Any idea how to do this header area as a responsive design?
Permalink
Hi - thinking of using skeletal or the like to produce this but not sure the best route or achieving this. I'm not sure how I will finesse putting in the logo on a wide measure that overlaps the nav area above. Any ideas anyone? I guess I could use background images but they don't work too well responsively do they? Any guidance gratefully received thanks guys :)
How would you handle putting in that big image? Would you use a background image? Not sure how I'm going to work as the logo underneath overlaps the clear column the nav bar above would like to use for responsiveness.
I'm not sure what you mean... I would put it in as a background-image with nav above and logo just on the same position fixed from right side...
Thanks yes that's what I mean the best strategy for placing thing to be responsive. If I made the header as a background image would it be responsive? Just wondering how it would scale on the ipads etc background images can be a bit dodgy can't they?
Ah ok, no, backgrounds are not necessarly responsive, this works better with images. Are you using a responsive framework or theme for that?
Yes I was thinking of using Slate which uses the Skeletal framework
Hm... or create the image together with the logo and insert it as a background-image and use one of the add-ons in the marketplace that stretch the background to appropriate screensize (backstretch) using jQuery.
For smaller Devices I would make it "Logo only", you can easily switch between those two versions by using the mediaqueries in the css.
For smaller Devices I would make it "Logo only", you can easily switch between those two versions by using the mediaqueries in the css.
Didn't know you could use this with individual divs I thought that was only for the background of the whole body tag
Well, if you visit the live-demo (http://backstretch.werstnet.com/)
And change "position:fixed;" to "position:absolute;" with firebug, it seems to do what you need?
What I was thinking - the image scales to browser width, menu (and/or Logo) could be floating right over the Image... Not sure if this is what you want though.
Nice design :)
And change "position:fixed;" to "position:absolute;" with firebug, it seems to do what you need?
What I was thinking - the image scales to browser width, menu (and/or Logo) could be floating right over the Image... Not sure if this is what you want though.
Nice design :)
Nice idea - I was thinking that the graphic would be restrained to the header area only though and not scale to the full browser width. The body background will just be a flat colour or a texture of some sort. I'm trawling the web for solutions there's most likely a CSS fix! But yes then the nav can go over the top no probs. Thanks re. the design I tend to work out my designs without thinking how the heck I'm going to build them as this gives me more creative freedom - it also gets me into all sorts of difficulties sometimes - but hey that's the challenge!!
For phone dimensions, I would get rid of the big image, center the logo and display the menu as a stack below the logo.
The big picture is beautiful to view but not very useful for small screens...