Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Fixed Header

Home Forums Support Fixed Header

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

    I have done this: http://generatepress.com/forums/topic/how-can-i-create-a-fixed-header-and-top-menu-in-the-generate-press-theme/#post-31579

    “Tribute Journal” is the “Logo” and then there is a 1318×130 image that is the header (in the background images section) that includes the pen and other text etc.

    After putting the recommended code in to Edit CSS and into GP hooks – my page header is getting cut off. If you mess around with your window size you will also notice that the page header is jumping up a bit above the menu bar for lower sized screens. I’ve been playing around with layout – and the numbers in the edit CSS code but I cannot seem to solve this issue.

    http://www.mytributejournal.com/

    The ultimate goal is a sticky header (like it currently is) where all the content under the menu rolls under it (like it is… but the page header is cut off which is the problem.)

    Appreciate any help on the matter!

    #152900
    Tom
    Lead Developer
    Lead Developer

    I can’t think of a way to make your entire header sticky while using a background image for the header like you are currently.

    I believe you would have to use a regular image as the header in order for the code you linked to to work.

    #152967
    Joseph

    I have an image as the header though. The graphic “Tribute Journal” is the “logo image” and it is staying sticky just fine. The problem is that the site content loads behind the header now (the front page has a page header that is cut off and any other page loses the title and first few sentences of text. The sticky issue was solved with your code in hooks and css. I just now have to resolve the content issue.

    #152974
    Joseph

    Well I’ve jerryrigged it for now. To push the content down below the header I added the following code to “after header” in GP hooks:

    <table border="0" padding="0" height="122px"><tr><td></td></tr></table>

    Not pretty – but it seems to be doing what I need it to do. If there is a cleaner way to do this I’m open to suggestions.

    #153033
    Tom
    Lead Developer
    Lead Developer

    Ah, you can try this CSS instead:

    .custom-fixed-header + div {
        margin-top: 122px;
    }
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.