Archived topic
Fixed Header
4 replies · Started by Josep on November 13, 2015
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 1318x130 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!
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.
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.
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.
Ah, you can try this CSS instead:
.custom-fixed-header + div {
margin-top: 122px;
}