My main concern with adding a header is that it might squish the initial view up too much (Because of the fixed footer), but it's super simple to add your own header. I can give you the code, if you like!
For various reasons, I wouldn't fix the header even if the footer was scrollable, but I've got two other solutions you might want to try if you really want an image header.
First is to just bump everything down enough that you can put a header in there:
body {background: #f2f2f2 url(http://URL TO YOUR HEADER IMAGE) top center no-repeat;} .pageheaderblock {margin-top:###px;}
You would change ### to the height of your image minus around 45px-You would probably want to mess about with the margin value depending upon where you want your image in relation to the rest of the layout.
Second choice is to remove the title and subtitle altogether so that your image butts right up against the top of the menu. IMO, this would look neater. The code for that:
body {background: #f2f2f2 url(http://URL TO YOUR HEADER IMAGE) top center no-repeat; .header-menu {margin-top:###px;} .header-title, .header-subtitle {display:none;}Again, ### = the height of your header
( ... )
Comments 46
Reply
Reply
Reply
Reply
Reply
Reply
The concern, well, concerns me though now too, lol. What if you had a fixed header that's the exact same size as the main content?
Reply
First is to just bump everything down enough that you can put a header in there:
body {background: #f2f2f2 url(http://URL TO YOUR HEADER IMAGE) top center no-repeat;}
.pageheaderblock {margin-top:###px;}
You would change ### to the height of your image minus around 45px-You would probably want to mess about with the margin value depending upon where you want your image in relation to the rest of the layout.
Second choice is to remove the title and subtitle altogether so that your image butts right up against the top of the menu. IMO, this would look neater. The code for that:
body {background: #f2f2f2 url(http://URL TO YOUR HEADER IMAGE) top center no-repeat;
.header-menu {margin-top:###px;}
.header-title, .header-subtitle {display:none;}Again, ### = the height of your header ( ... )
Reply
Leave a comment