WordPress.org

Ready to get started?Download WordPress

Forums

Quark
[resolved] Sticky Header and Footer (3 posts)

  1. Brandit360
    Member
    Posted 5 months ago #

    Hello, I am trying to modify the header and footer to stay fixed to the top and bottom of the screen while the content scrolls in between. All of my CSS changes are resulting in the content floating in front of the header and the footer container disappearing. What is the proper CSS to achieve this?

  2. ChristianAlder
    Member
    Posted 5 months ago #

    As in fixed so it's always visible when you scroll up and down? I think I may have accidentally found a way of doing it when trying to fix my own footer issue.

    #footercontainer {
    	position: fixed;
    	bottom: 0;
    ...
    ...

    I'm not sure if that's the best way or if that's what you wanted - all I know is that when I have that in the footercontainer CSS, it's fixed in place at the bottom of the screen and all content is scrolled underneath.

    EDIT:
    I should note, that the same seems to work on the header too, only you use top instead of bottom, and I applied a z-index to prevent the content from overlapping

    #headercontainer {
    	position: fixed;
    	top: 0;
    	z-index: 9999;
    ...
    ...

    Again, I can't say if this is the proper way of doing it - I found this by mistake ^^

  3. Brandit360
    Member
    Posted 5 months ago #

    That worked! Thank you, looks like the z-index is the trick to the content going behind the header.

Reply

You must log in to post.

About this Theme

About this Topic