[Resolved] Header Vs. Logo and content scrolling issues

[Josep]

Here is the website I am building for a client: http://www.mytributejournal.com/

I want the header (All the text – and Pen) and the nav bar to be fixed at the top of the page (as they are currently). I want the content to scroll under the nav bar and header… which they do… kind of.

If you play with the width of your browser window you will see that while the header (note: NOT LOGO) image resizes with the window, the nav bar stays fixed… and thus in a smaller window the content will RE-APPEAR between the nav bar and header when scrolling.

Current Settings:
Logo – a Transparent block 10×116
Background Header Image – The Text and Pen on the brown background

What I have Tried and results:
Logo – Text and pen on Brown Background
Background Header Image – none
Result – Header image is squeezed into the 960px Container – as you can see with the swirls – this does not work as it cuts the swirls off mid swirl – IF I COULD MAKE THE LOGO GO FLUID FULL WIDTH THIS WOULD PROBABLY SOLVE MY PROBLEM!!!

Logo – Text and Pen on Transparent Background
Background Header Image – none
Result: Content scrolls underneath header but since background is transparent you still see the content behind the image

Logo – None
Background Header Image – The Text and Pen on the brown background
Results – Nav bar jumps to the top of the screen – content scrolls over image.

Any Help Greatly Appreciated!

[Josep]

Note – as you play with the width you will notice the narrower the screen – the more content that will show above the header.

Joseph

[Tom]

I’m pretty sure the only way to avoid this is to make your entire header a static image (not a background image) and then remove the margin-top CSS creating the space currently.

That will make it so the height of the static header dictates the height, and will be reponsive.

Currently, the height is dictated by the margin-top CSS, which doesn’t change even when the screen size changes.

[Author]

Posts