Skip to main content
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Go to solution
mmgk
New

Sticky Header and Footer

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?

2 ACCEPTED SOLUTIONS
ablake
Community Manager

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!

 

 

 

Angela B - GoDaddy | Community Manager | 24/7 support available at x.co/247support | Remember to choose a solution and give kudos.

View solution in original post

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

Cheers.

View solution in original post

2 REPLIES 2
ablake
Community Manager

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!

 

 

 

Angela B - GoDaddy | Community Manager | 24/7 support available at x.co/247support | Remember to choose a solution and give kudos.

View solution in original post

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

Cheers.

View solution in original post