sticky header covers sticky sidebar (while scrolling down)

Hi @zhel98,

You can actually adjust the top offset with this CSS code:

.si-sticky-sidebar .si-sidebar-inner {
top: 150px !important;
}

Feel free to adjust the value.

You can add the code into the Additional CSS field in the Customizer.

Thanks!

Thank you a lot! It did help. However, when you scroll down to the bottom of the page main header still covers a tiny bit of the sticky bar.
Issue when the page is scrolled down to the footer
I tried putting down different px values but it didnt help

• This reply was modified 4 years, 1 month ago by zhel98.

I have a related question.

I wanted sticky header on desktop but not mobile (So i disabled sticky header in settings)… and I added this in css:

}
@media only screen and (min-width:768px){#masthead {
position: sticky;
top: 0;
z-index: 9;
}

In the preview mode it looks perfect but on the forward facing website it is not working on the homepage (just the other pages) it also made the page header sticky (the blue area), not just the main header. Any ideas?

cdresourcegroup.com is the site

@bkflsw,

I just visited your website and it works fine on my end.
Try to clear your browser cache and give it a try.

The CSS solution is probably not the best one, so we will add an option in the next update to choose on which devices you want to enable sticky header on.

Thank you!! @brankoconjic

It’s working now on all pages but the page header is sticking along with the main header on all pages except the home page (home page is working fine).

Is there something I can add to the CSS so the page header remains fixed?

Any update? @brankoconjic

As I mentioned the CSS solution is probably not the best one to go with. I don’t think the sticky issue can be fixed with CSS only.

The inbuilt sticky header would be a better solution. The new update will include an option to choose on which devices you want to enable sticky header on.