Sticky Header and Footer

[mmgk]

Hi,

I am using GO theme for my site. I am wondering how to apply sticky Header and Footer since I have large body content and every time user have to scroll up or down to get Primary menu option to see and redirect.

Thoughts?

[ablake · Accepted solution]

Hey @mmgk,

This CSS should work:

.site-header {
  position: fixed;
  top: 0;
  width: 100%;
}

.site-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

You can put it in the Additional CSS section in the Customize menu.

You'll probably still need to do additional styling (like adding a background color, adjustments to margins & padding, etc.) involving other elements to make it look good. Also, be sure to check that it doesn't obscure too much page content on mobile.

I wouldn't necessarily recommend making both the header and footer sticky. If you have your main nav in the header (like most sites), I'd just do a sticky header.

Hope this helps!

[ablake · Accepted solution]

Hey @mmgk,

This CSS should work:

.site-header {
  position: fixed;
  top: 0;
  width: 100%;
}

.site-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

You can put it in the Additional CSS section in the Customize menu.

You'll probably still need to do additional styling (like adding a background color, adjustments to margins & padding, etc.) involving other elements to make it look good. Also, be sure to check that it doesn't obscure too much page content on mobile.

I wouldn't necessarily recommend making both the header and footer sticky. If you have your main nav in the header (like most sites), I'd just do a sticky header.

Hope this helps!

[mmgk · Accepted solution]

Thanks @ablake and agree to just have header to be sticky. It works for my purpose.

Cheers.