Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Header Vs. Logo and content scrolling issues

Home Forums Support Header Vs. Logo and content scrolling issues

  • This topic has 2 replies, 2 voices, and was last updated 5 years ago by Tom.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #153466
    Joseph

    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!

    #153468
    Joseph

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

    Joseph

    #153652
    Tom
    Lead Developer
    Lead Developer

    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.