Rocked pro sticky header

My sticky header on the site disappears until I get to my second FP widget, then it reappears. I want it to stay sticky the whole time. How??

http://0008o5p.rcomhost.com/wordpress1/

Dear Dawn,

Thank you for asking.

In order to accomplish that objective, could you please try to add the following CSS code through the Simple Custom CSS plugin?

#header{
  position: fixed;
  z-index: 9999;
}

.admin-bar #header{
   top: 32px !important;
}

#header.downscrolled {
  position: fixed;
  width: 100%;
  opacity: 1;
  top: 0;
  -webkit-transition: unset;
  transition: unset;
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

This worked to hold the header in place, however it is now overlapping the crelly slider.

Dear Dawn,

Thank you for updating me.

I would like to apologize in advance for delayed reply.

Could you please try to apply the following CSS code?

.site .crellyslider-slider{
  margin-top: 183px;
}

@media only screen and (min-width: 1025px) and (max-width: 1199px){
  .site .crellyslider-slider{  
   margin-top: 225px;
  }  
}
 

@media only screen and (max-width: 1024px){
  .site .crellyslider-slider{  
   margin-top: 163px;
  }  
}

@media only screen and (max-width: 600px){
  .site .crellyslider-slider{  
   margin-top: 180px;
  }  
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

Now doing cross browser checking and have issue of header overlapping content. See here. https://www.evernote.com/l/AYjVVEnfHCxG4Yl73fkRY8wpipFf07tU7_QB/image.png

how to fix?

Hello there,

Please share its URL here so I can have a closer look.

Regards,
Kharis

Hello there,

Try to apply the following CSS code:

.main-content{
  padding-top: 140px;
}

Regards,
Kharis

Well, i had to increase it to 200, and it seems to work inconsistently on pages. The NEWS page still doesn’t start at the top of the content.??

To apply more padding in the blog page only, try to apply the following CSS code:

.blog .main-content{
  padding-top: 225px;
}

Let me know how it goes.

Regards,
Kharis

taht worked for teh single post pages, but not for the page showing multiple posts. Seems like the code works for some pages but not all.

for instance,
The about us page - doesn’t work
careers page - works

If you scroll through the menu, you will see what i mean.

I don’t want a custom css for every page on the site.

Can you look at all the custom css that’s been recommended and tell me what needs to change. I think it has to do with the original problem with the crelly slider overlapping.

#header {
position: fixed;
z-index: 9999;
}

.admin-bar #header {
top: 36px !important;
}

#header.downscrolled {
position: fixed;
width: 100%;
opacity: 1;
top: 0;
-webkit-transition: unset;
transition: unset;
}

.site .crellyslider-slider {
margin-top: 183px;
}

.main-content {
padding-top: 225px;
}

.blog .main-content {
padding-top: 225px;

Hello there,

Is there any URL I can have a look? I can’t access it http://0008o5p.rcomhost.com/wordpress1/ anymore.

Regards,
Kharis

Hello there,

> that worked for teh single post pages, but not for the page showing multiple posts. Seems like the code works for some pages but not all.

I thought that the code works at this page http://kerrpump.com/news-blog/ as well. Have I missed a thing?

To adjust the top padding at the page like http://pumps.kerrpump.com/category/liquid-pumps, try to apply the following CSS code:

.ng-scope .main-content{
  padding-top: 0;
}

Regards,
Kharis